Static generate gists code

components/RUA/RUALoading.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import loadingImage from 'public/images/img/mona-loading-default.gif';
+import Image from 'next/image';
+
+const RUALoading = () => {
+  return (
+    <div
+      className={classNames(
+        'h-[300px] flex loading',
+        'flex-col items-center justify-center'
+      )}
+    >
+      <Image width={50} height={50} src={loadingImage} alt="Loading" />
+
+      <span className="my-4">rua rua rua...</span>
+    </div>
+  );
+};
+
+export default RUALoading;

components/gists/GistsCode.tsx

@@ -1,39 +1,17 @@
-import { Gist } from 'types';
+import { GistsFile } from 'types';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypePrism from '@mapbox/rehype-prism';
 import remarkGfm from 'remark-gfm';
-import { createElement, Fragment, useEffect, useState } from 'react';
+import { createElement, Fragment } from 'react';
 import rehypeReact from 'rehype-react';
-import classNames from 'classnames';
-import useInView from 'lib/hooks/useInView';
-import loadingImage from 'public/images/img/mona-loading-default.gif';
-import Image from 'next/image';
 
 interface Props {
-  gist: Gist;
-  f: string;
+  file: GistsFile;
 }
 
-const GistsCode = ({ gist, f }: Props) => {
-  const file = gist.files;
-  const url = file[f].raw_url;
-  const format = file[f].language;
-
-  const { ref, inView } = useInView();
-
-  const [rawCode, setRawCode] = useState('');
-  useEffect(() => {
-    inView && getRawCode();
-
-    async function getRawCode() {
-      const res = await fetch(url);
-      const raw = await res.text();
-      setRawCode(`\`\`\`${format ?? ''}\n${raw}`);
-    }
-  }, [format, inView, url]);
-
+const GistsCode = ({ file }: Props) => {
   const code = unified()
     .use(remarkParse)
     .use(remarkRehype)
@@ -43,26 +21,11 @@ const GistsCode = ({ gist, f }: Props) => {
       createElement,
       Fragment,
     })
-    .processSync(rawCode).result;
+    .processSync(`\`\`\`${file.language ?? ''}\n${file.content}`).result;
 
   return (
     <>
-      <div ref={ref}>
-        {rawCode ? (
-          <div className={classNames(!rawCode && 'min-h-[300px]')}>{code}</div>
-        ) : (
-          <div
-            className={classNames(
-              'h-[300px] flex loading',
-              'flex-col items-center justify-center'
-            )}
-          >
-            <Image width={50} height={50} src={loadingImage} alt="Loading" />
-
-            <span className="my-4">rua rua rua...</span>
-          </div>
-        )}
-      </div>
+      <div>{code}</div>
     </>
   );
 };

pages/g/[id].tsx

@@ -71,7 +71,7 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
                   </div>
                 </div>
 
-                <GistsCode gist={gist} f={f} />
+                <GistsCode file={gist.files[f]} />
               </div>
             ))}
           </div>
@@ -92,14 +92,24 @@ export const getStaticProps: GetStaticProps<{
   id: string | undefined;
   gist: SignalGist;
 }> = async ({ params }) => {
+  const gist = (await fetch(`https://api.github.com/gists/${params?.id}`).then(
+    (res) => res.json()
+  )) as SignalGist;
+
+  await Promise.all(
+    Object.keys(gist.files).map(async (f) => {
+      gist.files[f].content = await fetch(gist.files[f].raw_url).then((res) =>
+        res.text()
+      );
+    })
+  );
+
   return {
     props: {
       id: params?.id?.toString(),
-      gist: await fetch(`https://api.github.com/gists/${params?.id}`).then(
-        (res) => res.json()
-      ),
+      gist,
     },
-    revalidate: 3600,
+    revalidate: 600,
   };
 };
 

pages/gists.tsx

@@ -15,7 +15,6 @@ const Gists = ({
   gists,
   user,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
-  console.log(gists);
   return (
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
@@ -66,7 +65,7 @@ const Gists = ({
                     <p className="text-gray-400">Update at: {g.updated_at}</p>
                     <p className="text-gray-500">{g.description}</p>
 
-                    <GistsCode gist={g} f={f} />
+                    <GistsCode file={g.files[f]} />
                   </div>
                 ))}
               </div>
@@ -82,14 +81,29 @@ export const getStaticProps: GetStaticProps<{
   gists: Gist[];
   user: GithubUser;
 }> = async () => {
+  const gists = (await fetch(
+    'https://api.github.com/users/DefectingCat/gists'
+  ).then((res) => res.json())) as Gist[];
+  const user = await fetch('https://api.github.com/users/DefectingCat').then(
+    (res) => res.json()
+  );
+
+  await Promise.all(
+    gists.map(async (g) => {
+      await Promise.all(
+        Object.keys(g.files).map(async (f) => {
+          g.files[f].content = await fetch(g.files[f].raw_url).then((res) =>
+            res.text()
+          );
+        })
+      );
+    })
+  );
+
   return {
     props: {
-      gists: await fetch(
-        'https://api.github.com/users/DefectingCat/gists'
-      ).then((res) => res.json()),
-      user: await fetch('https://api.github.com/users/DefectingCat').then(
-        (res) => res.json()
-      ),
+      gists,
+      user,
     },
     revalidate: 600,
   };

types/index.ts

@@ -47,6 +47,7 @@ export interface GistsFile {
   language: GistsLanguage | null;
   raw_url: string;
   size: number;
+  content: string;
 }
 export enum GistsLanguage {
   JavaScript = 'JavaScript',