fix: ssr

ParzivalEugene · Aug 26, 2024 · f98cb88 · f98cb88
1 parent eb81185
commit f98cb88
Show file tree

Hide file tree

Showing 19 changed files with 625 additions and 838 deletions.
diff --git a/actions/getMongoInfo.ts b/actions/getMongoInfo.ts
diff --git a/actions/getSocialInfo.ts b/actions/getSocialInfo.ts
@@ -2,12 +2,12 @@
 
 import { env } from "@/env";
 
-interface GetGithubInfo {
+export interface GetGithubInfo {
   contirbutions: number;
   repositories: number;
 }
 
-interface GetLeetcodeInfo {
+export interface GetLeetcodeInfo {
   solved: number;
   rank: number;
 }

diff --git a/actions/getSpotifyInfo.ts b/actions/getSpotifyInfo.ts
@@ -1,7 +1,7 @@
 "use server";
 
 import { env } from "@/env";
-import { getSpotifyLink } from "./getMongoInfo";
+import { spotifyPlaylistId } from "@/data/constants";
 
 export interface GetSpotifyInfo {
   title: string;
@@ -38,12 +38,10 @@ export const getSpotifyInfo = async (): Promise<GetSpotifyInfo> => {
     link: "https://open.spotify.com/playlist/52ujyIugSAiTRwaQFnwKhL",
   };
   const token = await getToken();
-  const spotifyLink = await getSpotifyLink();
-  const playlistId = spotifyLink?.split("/")[4].split("?")[0];
-  if (!token || !spotifyLink) return defaultValue;
+  if (!token) return defaultValue;
 
   const playlistRes = await fetch(
-    `https://api.spotify.com/v1/playlists/${playlistId}?fields=name,images`,
+    `https://api.spotify.com/v1/playlists/${spotifyPlaylistId}?fields=name,images`,
     {
       method: "GET",
       headers: {
@@ -56,7 +54,7 @@ export const getSpotifyInfo = async (): Promise<GetSpotifyInfo> => {
   );
 
   const countRes = await fetch(
-    `https://api.spotify.com/v1/playlists/${playlistId}/tracks?fields=total`,
+    `https://api.spotify.com/v1/playlists/${spotifyPlaylistId}/tracks?fields=total`,
     {
       method: "GET",
       headers: {
@@ -78,6 +76,6 @@ export const getSpotifyInfo = async (): Promise<GetSpotifyInfo> => {
     title: playlistResponse.name,
     songs: countResponse.total,
     cover: playlistResponse.images[0].url,
-    link: `https://open.spotify.com/playlist/${playlistId}`,
+    link: `https://open.spotify.com/playlist/${spotifyPlaylistId}`,
   };
 };
diff --git a/app/api/info/get-github-info/route.ts b/app/api/info/get-github-info/route.ts
diff --git a/app/api/info/get-leetcode-info/route.ts b/app/api/info/get-leetcode-info/route.ts
diff --git a/app/api/info/get-spotify-info/route.ts b/app/api/info/get-spotify-info/route.ts
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,37 +1,53 @@
+import { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
+export const metadata: Metadata = {
+  icons: [
+    {
+      rel: "icon",
+      url: "/m.svg",
+    },
+  ],
+  title: "Michkoff | Links",
+  description: "All my links that you need",
+  twitter: {
+    site: "@ParzivalEugene",
+    images: [
+      {
+        url: "/preview.png",
+        width: 1200,
+        height: 630,
+        alt: "Michkoff | Links",
+      },
+    ],
+  },
+  openGraph: {
+    type: "website",
+    url: "https://links.michkoff.com/",
+    title: "Michkoff | Links",
+    description: "All my links that you need",
+    images: [
+      {
+        url: "/preview.png",
+        width: 1200,
+        height: 630,
+        alt: "Michkoff | Links",
+      },
+    ],
+  },
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <title>Michkoff | Links</title>
-      <meta name="title" content="Michkoff | Links" />
-      <meta name="description" content="All my links that you need" />
-      <link rel="icon" sizes="256x256" href="/e_logo.svg" />
-
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content="https://links.michkoff.com/" />
-      <meta property="og:title" content="Michkoff | Links" />
-      <meta property="og:description" content="All my links that you need" />
-      <meta property="og:image" content="/preview.png" />
-
-      <meta property="twitter:card" content="summary_large_image" />
-      <meta property="twitter:url" content="https://links.michkoff.com/" />
-      <meta property="twitter:title" content="Michkoff | Links" />
-      <meta
-        property="twitter:description"
-        content="All my links that you need"
-      />
-      <meta property="twitter:image" content="/preview.png" />
-      <body className={inter.className}>
-          {children}
-      </body>
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,16 +1,22 @@
+import {
+  GetGithubInfo,
+  getGithubInfo,
+  GetLeetcodeInfo,
+  getLeetcodeInfo,
+} from "@/actions/getSocialInfo";
 import { AboutCard } from "@/components/about-card";
 import { PortfolioCard } from "@/components/portfolio-card";
+import { ResumeCard } from "@/components/resume-card";
 import { SocialCard } from "@/components/social-card";
-import { SpotifyCard, SpotifyCardSkeleton } from "@/components/spotify-card";
+import { SpotifyCard } from "@/components/spotify-card";
 import GithubIcon from "@/public/logos/github.png";
-import GitlabIcon from "@/public/logos/gitlab.png";
 import LeetcodeIcon from "@/public/logos/leetcode.png";
 import TelegramIcon from "@/public/logos/telegram.png";
-import { Suspense } from "react";
-import { FileText } from "lucide-react";
-import { ResumeCard } from "@/components/resume-card";
 
 export default async function Home() {
+  const githubDescription = (await getGithubInfo()) as GetGithubInfo;
+  const leetcodeDescription = (await getLeetcodeInfo()) as GetLeetcodeInfo;
+
   return (
     <div className="mx-auto w-fit py-12 lg:py-16 flex flex-col items-center">
       <h1 className="text-3xl font-bold leading-none mb-12 text-center lg:text-4xl lg:mb-16 xl:text-6xl">
@@ -20,8 +26,10 @@ export default async function Home() {
         <SocialCard
           link="https://github.com/ParzivalEugene"
           icon={GithubIcon}
-          descriptionUrl="info/get-github-info"
-          items={2}
+          description={[
+            `${githubDescription.contirbutions} contributions`,
+            `${githubDescription.repositories} repositories`,
+          ]}
           title="ParzivalEugene"
           className="hover:bg-zinc-900/60 hover:shadow-zinc-500/40 github"
         />
@@ -38,14 +46,14 @@ export default async function Home() {
         <SocialCard
           link="https://leetcode.com/ParzivalEugene/"
           icon={LeetcodeIcon}
-          descriptionUrl="info/get-leetcode-info"
-          items={2}
+          description={[
+            `${leetcodeDescription.rank} rank`,
+            `${leetcodeDescription.solved} solved`,
+          ]}
           title="ParzivalEugene"
           className="hover:bg-[#15110D] hover:shadow-[#EBA340]/40 leetcode"
         />
-        <Suspense fallback={<SpotifyCardSkeleton />}>
-          <SpotifyCard />
-        </Suspense>
+        <SpotifyCard />
       </div>
     </div>
   );

diff --git a/components/about-card.tsx b/components/about-card.tsx
@@ -24,12 +24,7 @@ export const AboutCard = () => {
   return (
     <Card className="rounded-3xl about relative">
       <CardHeader className="gap-2 lg:gap-8 p-4 lg:p-6">
-        <Image
-          src={FacePic}
-          alt="Eugene"
-          className="rounded-xl"
-          placeholder="blur"
-        />
+        <Image src={FacePic} alt="Eugene" className="rounded-xl" />
         <Badge className="text-xs px-0 flex justify-center py-1 rounded-xl">
           Fullstack developer
         </Badge>