From 32e0f1c953bd78c0eefba514d8cd8d25c5c6a093 Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Fri, 29 Apr 2022 09:44:59 +0800
Subject: [PATCH] Static generate gists code

---
 components/RUA/RUALoading.tsx  | 21 +++++++++++++++
 components/gists/GistsCode.tsx | 49 +++++-----------------------------
 pages/g/[id].tsx               | 20 ++++++++++----
 pages/gists.tsx                | 30 +++++++++++++++------
 types/index.ts                 |  1 +
 5 files changed, 65 insertions(+), 56 deletions(-)
 create mode 100644 components/RUA/RUALoading.tsx

diff --git a/components/RUA/RUALoading.tsx b/components/RUA/RUALoading.tsx
new file mode 100644
index 0000000..a8038fa
--- /dev/null
+++ b/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;
diff --git a/components/gists/GistsCode.tsx b/components/gists/GistsCode.tsx
index 701bee2..690a15e 100644
--- a/components/gists/GistsCode.tsx
+++ b/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>
     </>
   );
 };
diff --git a/pages/g/[id].tsx b/pages/g/[id].tsx
index a110540..7c36ed1 100644
--- a/pages/g/[id].tsx
+++ b/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,
   };
 };
 
diff --git a/pages/gists.tsx b/pages/gists.tsx
index f3b2d0f..1cded31 100644
--- a/pages/gists.tsx
+++ b/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,
   };
diff --git a/types/index.ts b/types/index.ts
index fbb4159..5edd990 100644
--- a/types/index.ts
+++ b/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',