Fixes for SSR and SEO generation + console logs to info

middlewarehq · Dec 13, 2023 · 2c5e10f · 2c5e10f
1 parent 2d84323
commit 2c5e10f
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 138 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "mixpanel-browser": "^2.48.1",
     "next": "14.0.3",
     "next-auth": "^4.24.5",
+    "next-seo": "^6.4.0",
     "pluralize": "^8.0.0",
     "ramda": "^0.29.1",
     "react": "^18",

diff --git a/src/api-helpers/archive.ts b/src/api-helpers/archive.ts
@@ -3,7 +3,7 @@ import { ImageFile } from '../types/images';
 import chalk from 'chalk';
 
 export async function archiveFiles(fileBuffers: ImageFile[]): Promise<Buffer> {
-  console.log(chalk.yellow('Archiving images...'));
+  console.info(chalk.yellow('Archiving images...'));
   return new Promise((resolve, reject) => {
     const archive = archiver('zip', { zlib: { level: 9 } });
     const bufferArray: Buffer[] = [];

diff --git a/src/api-helpers/image-gen.ts b/src/api-helpers/image-gen.ts
@@ -11,7 +11,7 @@ export const generateImages = async (
   customSequence?: CardTypes[]
 ): Promise<ImageFile[]> => {
   try {
-    console.log(chalk.yellow('Generating images...'));
+    console.info(chalk.yellow('Generating images...'));
 
     const cardSequence = customSequence || sequence;
 

diff --git a/src/components/AppLoadingStateWrapper.tsx b/src/components/AppLoadingStateWrapper.tsx
@@ -1,14 +1,17 @@
 import React, { ReactNode } from 'react';
 import { LoaderWithFacts } from '@/components/LoaderWithFacts';
 import { useSession } from 'next-auth/react';
+import { useIsClient } from 'usehooks-ts';
 
 export const AppLoadingStateWrapper: React.FC<{ children: ReactNode }> = ({
   children
 }) => {
   const { status } = useSession();
+  const isClient = useIsClient();
+
   return (
     <div>
-      {status === 'loading' ? (
+      {status === 'loading' && isClient ? (
         <div className="h-screen flex flex-col items-center justify-between p-10">
           <LoaderWithFacts />
         </div>

diff --git a/src/components/AuthActions.tsx b/src/components/AuthActions.tsx
@@ -93,7 +93,7 @@ export const AuthActions = () => {
             <button
               className="bg-indigo-800 text-white px-4 py-2 rounded-md shrink-0"
               onClick={() => {
-                // console.log('public');
+                // console.info('public');
               }}
             >
               {'->'}

diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
@@ -8,6 +8,7 @@ import React, {
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { logException } from '@/utils/logger';
+import { useIsClient } from 'usehooks-ts';
 
 interface AppStateInterface {
   isLoading: boolean;
@@ -24,8 +25,9 @@ interface AppStateProviderInterface {
 export const AppStateProvider = ({ children }: AppStateProviderInterface) => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
+  const isClient = useIsClient();
   useSession({
-    required: true,
+    required: isClient,
     onUnauthenticated() {
       router.pathname !== '/' &&
         !router.pathname.startsWith('/view') &&

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -13,6 +13,8 @@ import { useLocalStorage } from 'usehooks-ts';
 import Script from 'next/script';
 import '@/styles/swiper.css';
 import 'react-tooltip/dist/react-tooltip.css';
+import Head from 'next/head';
+import { DefaultSeo } from 'next-seo';
 
 export default function App({
   Component,
@@ -70,6 +72,35 @@ export default function App({
 
   return (
     <>
+      <DefaultSeo
+        title="Unwrapped by Middleware"
+        description="A yearly recap of your GitHub, like Spotify Wrapped. If you are a developer, you will love it! ❤️"
+        openGraph={{
+          type: 'website',
+          url: process.env.NEXT_PUBLIC_APP_URL,
+          images: [
+            {
+              url: `${process.env.NEXT_PUBLIC_APP_URL}/assets/images/og-image.png`
+            }
+          ]
+        }}
+        twitter={{
+          cardType: 'summary_large_card',
+          site: process.env.NEXT_PUBLIC_APP_URL,
+          handle: 'middlewarehq'
+        }}
+      />
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <meta
+          name="keywords"
+          content="developer,unwrap,app,recap,yearly,review,annual,github,spotify,wrapped,year-in-review,year in review,middleware,software,engineering,annual review,appraisal,december,github unwrapped,githubunwrapped,github-unwrapped,software engineers,jayant bhawal,eshaan yadav,samad yar khan,shivam singh,dhruv agarwal,varun narula,adnan hashmi,cadence,management,dora metrics,open source,open-source,contributions,bottlenecks"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+      </Head>
       <main className={`${inter} text-white`}>
         <SessionProvider session={session}>
           <AppStateProvider>

diff --git a/src/pages/api/download.ts b/src/pages/api/download.ts
@@ -84,12 +84,12 @@ const fetchAndDownloadImageBuffer = async (
         data: imageData
       } as ImageAPIResponse);
     }
-    console.log(chalk.green('Successfully sent buffer to client'));
+    console.info(chalk.green('Successfully sent buffer to client'));
   } catch (error: any) {
     logException('Error fetching or sending buffer', {
       originalException: error
     });
-    console.log(chalk.red('Error fetching or sending buffer:'), error);
+    console.info(chalk.red('Error fetching or sending buffer:'), error);
     res.status(error.status || 500).json({ message: error.message });
   }
 };

diff --git a/src/pages/api/shared/[username]/[cardname]/[...hash].ts b/src/pages/api/shared/[username]/[cardname]/[...hash].ts
@@ -38,9 +38,9 @@ const fetchAndDownloadImageBuffer = async (
     res.setHeader('Content-Length', cachedCardBuffer.data.length);
     res.send(cachedCardBuffer.data);
 
-    console.log(chalk.green('Successfully sent buffer to client'));
+    console.info(chalk.green('Successfully sent buffer to client'));
   } catch (error: any) {
-    console.log(chalk.red('Error fetching or sending buffer:'), error);
+    console.info(chalk.red('Error fetching or sending buffer:'), error);
     res.status(error.status || 500).json({ message: error.message });
   }
 };

diff --git a/src/pages/api/shared/[username]/[cardname]/index.ts b/src/pages/api/shared/[username]/[cardname]/index.ts
@@ -39,9 +39,9 @@ const fetchAndDownloadAllCardsZip = async (
     res.setHeader('Content-Type', 'application/zip');
     res.send(zippedData);
 
-    console.log(chalk.green('Successfully sent buffer to client'));
+    console.info(chalk.green('Successfully sent buffer to client'));
   } catch (error: any) {
-    console.log(chalk.red('Error fetching or sending buffer:'), error);
+    console.info(chalk.red('Error fetching or sending buffer:'), error);
     res.status(error.status || 500).json({ message: error.message });
   }
 };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,7 +10,6 @@ import { TrustNotice } from '@/components/TrustNotice';
 import { ThrownCards } from '@/components/ThrownCards';
 import { Description } from '@/components/Description';
 import { AuthActions } from '@/components/AuthActions';
-import Head from 'next/head';
 
 const PopDevsMasonry = dynamic(() =>
   import('@/components/PopDevsMasonry').then((m) => m.PopDevsMasonry)
@@ -36,84 +35,42 @@ export default function Home() {
   }, []);
 
   return (
-    <>
-      <Head>
-        {/* Favicon */}
-        <link rel="icon" href="/favicon.ico" />
-
-        <title>Unwrapped by Middleware</title>
-
-        <meta
-          name="keywords"
-          content="developer,unwrap,app,recap,yearly,review,annual,github,spotify,wrapped,year-in-review,year in review,middleware,software,engineering,annual review,appraisal,new year,new year's eve,december,github unwrapped,githubunwrapped,github-unwrapped,software engineers,jayant bhawal,eshaan yadav,samad yar khan,shivam singh,dhruv agarwal,varun narula,adnan hashmi,cadence,management,dora metrics,open source,open-source,contributions,bottlenecks,pull requests,prs,issues,commits,lines of code,loc,languages,repositories,repos,stars,forks,github insights"
-        />
-
-        <meta property="og:title" content={`Unwrapped by Middleware`} />
-        <meta
-          property="og:description"
-          content="A yearly recap of your GitHub, like Spotify Wrapped. If you are a developer, you will love it! ❤️"
-        />
-        <meta property="og:image" content="/assets/images/og-image.png" />
-        <meta property="og:url" content={process.env.NEXT_PUBLIC_APP_URL} />
-        <meta property="og:type" content="website" />
-
-        {/* Other meta tags */}
-        <meta
-          name="description"
-          content="A yearly recap of your GitHub, like Spotify Wrapped. If you are a developer, you will love it! ❤️"
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        {/* Twitter meta tags */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Unwrapped by Middleware" />
-        <meta
-          name="twitter:description"
-          content="A yearly recap of your GitHub, like Spotify Wrapped. If you are a developer, you will love it! ❤️"
-        />
-        <meta name="twitter:image" content="/assets/images/og-image.png" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no"
-        />
-      </Head>
-      <div className="justify-center w-full flex flex-col gap-4 box-border overflow-hidden">
-        <LogoSvg
-          style={{
-            position: 'fixed',
-            right: '-150px',
-            bottom: '-200px',
-            opacity: 0.3
-          }}
-          className="scale-[2] md:scale-[3]"
-        />
-        <IndexPageSection>
-          <ThrownCards />
-          <div className="flex flex-col gap-4 justify-center grow">
-            <span
-              className={`${major} text-5xl md:text-7xl lg:text-9xl`}
-              style={{ position: 'relative', left: '-0.08em' }}
-            >
-              UNWRAPPED
-            </span>
-            <span
-              className={`${major} text-8xl md:text-[7em] lg:text-[9em] text-purple-400`}
-              style={{ position: 'relative', left: '-0.15em' }}
-            >
-              2023
-            </span>
-            <Description />
-            <AuthActions />
-          </div>
-          <div className="flex flex-col mt-8">
-            <MouseScrollAnim fontSize="1.4em" />
-          </div>
-        </IndexPageSection>
-        <IndexPageSection>
-          <TrustNotice />
-          <PopDevsMasonry />
-        </IndexPageSection>
-      </div>
-    </>
+    <div className="justify-center w-full flex flex-col gap-4 box-border overflow-hidden">
+      <LogoSvg
+        style={{
+          position: 'fixed',
+          right: '-150px',
+          bottom: '-200px',
+          opacity: 0.3
+        }}
+        className="scale-[2] md:scale-[3]"
+      />
+      <IndexPageSection>
+        <ThrownCards />
+        <div className="flex flex-col gap-4 justify-center grow">
+          <span
+            className={`${major} text-5xl md:text-7xl lg:text-9xl`}
+            style={{ position: 'relative', left: '-0.08em' }}
+          >
+            UNWRAPPED
+          </span>
+          <span
+            className={`${major} text-8xl md:text-[7em] lg:text-[9em] text-purple-400`}
+            style={{ position: 'relative', left: '-0.15em' }}
+          >
+            2023
+          </span>
+          <Description />
+          <AuthActions />
+        </div>
+        <div className="flex flex-col mt-8">
+          <MouseScrollAnim fontSize="1.4em" />
+        </div>
+      </IndexPageSection>
+      <IndexPageSection>
+        <TrustNotice />
+        <PopDevsMasonry />
+      </IndexPageSection>
+    </div>
   );
 }
diff --git a/src/pages/view/[username]/[...hash].tsx b/src/pages/view/[username]/[...hash].tsx
@@ -7,7 +7,7 @@ import Confetti from 'react-confetti';
 import toast from 'react-hot-toast';
 import { UpdatedImageFile } from '@/types/images';
 import { useRouter } from 'next/router';
-import Head from 'next/head';
+import { NextSeo } from 'next-seo';
 
 export default function StatsUnwrapped() {
   const [isLoading, setIsLoading] = useState(false);
@@ -54,57 +54,42 @@ export default function StatsUnwrapped() {
       });
   }, [userName, hash, isUrlValid]);
 
+  const Header = () => (
+    <>
+      <NextSeo
+        title={`${userName}'s Unwrapped 2023`}
+        description={`${userName}'s 2023 on GitHub Unwrapped, by Middleware. It's like Spotify Wrapped, but for developers. You'll love it.`}
+        openGraph={{
+          type: 'website',
+          url: `${process.env.NEXT_PUBLIC_APP_URL}/view/${userName}/${hash}`,
+          images: [
+            {
+              url: `${process.env.NEXT_PUBLIC_APP_URL}/api/get_cover/${userName}/${hash}`
+            }
+          ]
+        }}
+        twitter={{
+          cardType: 'summary_large_card',
+          site: `${process.env.NEXT_PUBLIC_APP_URL}/view/${userName}/${hash}`,
+          handle: 'middlewarehq'
+        }}
+      />
+    </>
+  );
+
   if (isLoading) {
     return (
-      <div className="h-screen flex flex-col items-center justify-between p-10">
-        <LoaderWithFacts />
-      </div>
+      <>
+        <Header />
+        <div className="h-screen flex flex-col items-center justify-between p-10">
+          <LoaderWithFacts />
+        </div>
+      </>
     );
   }
   return (
     <>
-      <Head>
-        {/* Favicon */}
-        <link rel="icon" href="/favicon.ico" />
-
-        <title>{userName}&apos;s Unwrapped 2023</title>
-
-        {/* Open Graph meta tags */}
-        <link
-          rel={`${process.env.NEXT_PUBLIC_APP_URL}/api/get_cover/${userName}/${hash}`}
-        />
-
-        <meta property="og:title" content={`${userName}'s Unwrapped 2023`} />
-        <meta
-          property="og:description"
-          content={`${userName}'s 2023 on GitHub Unwrapped, by Middleware. It's like Spotify Wrapped, but for developers. You'll love it.`}
-        />
-        <meta
-          property="og:image"
-          content={`${process.env.NEXT_PUBLIC_APP_URL}/api/get_cover/${userName}/${hash}`}
-        />
-        <meta property="og:url" content={process.env.NEXT_PUBLIC_APP_URL} />
-        <meta property="og:type" content="website" />
-
-        {/* Other meta tags */}
-        <meta
-          name="description"
-          content={`${userName}'s 2023 on GitHub Unwrapped, by Middleware. It's like Spotify Wrapped, but for developers. You'll love it.`}
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        {/* Twitter meta tags */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Unwrapped by Middleware" />
-        <meta
-          name="twitter:description"
-          content={`${userName}'s 2023 on GitHub Unwrapped, by Middleware. It's like Spotify Wrapped, but for developers. You'll love it.`}
-        />
-        <meta
-          name="twitter:image"
-          content={`${process.env.NEXT_PUBLIC_APP_URL}/api/get_cover/${userName}/${hash}`}
-        />
-      </Head>
+      <Header />
       <div className="items-center justify-center p-4 min-h-screen w-full flex flex-col gap-10 text-center">
         <div>
           <h2 className="text-2xl">

diff --git a/src/utils/persistence/file-system.ts b/src/utils/persistence/file-system.ts
@@ -15,7 +15,7 @@ async function directoryExists(localDirectory: string): Promise<boolean> {
 async function ensureDirectoryExists(localDirectory: string) {
   try {
     await fs.mkdir(localDirectory, { recursive: true });
-    console.log(`Directory created: ${localDirectory}`);
+    console.info(`Directory created: ${localDirectory}`);
   } catch (error: any) {
     if (error.code === 'EEXIST') {
       console.error(`Directory already exists: ${localDirectory}`);