From f6cb2a8f74f662a647f8ca4e99f7fb489ca33c65 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Fri, 19 Aug 2022 10:50:02 +0800
Subject: [PATCH] Generate post toc on build time

---
 components/post/PostToc.tsx | 62 ++++++++++++++++++++++++++++---------
 layouts/MDXLayout.tsx       | 35 ---------------------
 lib/posts.ts                |  2 +-
 lib/utils/index.ts          | 42 +++++++++++++++++++++++++
 pages/p/[slug].tsx          | 16 ++++++++++
 scripts/build-search.mjs    |  6 ++--
 styles/rua.css              | 26 ++--------------
 7 files changed, 114 insertions(+), 75 deletions(-)
 delete mode 100644 layouts/MDXLayout.tsx

diff --git a/components/post/PostToc.tsx b/components/post/PostToc.tsx
index 4c88b0a..37a516e 100644
--- a/components/post/PostToc.tsx
+++ b/components/post/PostToc.tsx
@@ -1,4 +1,4 @@
-import { getHeadings } from 'lib/utils';
+import { getHeadings, SingleToc } from 'lib/utils';
 import Anchor from 'components/mdx/Anchor';
 import styles from './PostToc.module.css';
 import classNames from 'classnames';
@@ -6,10 +6,39 @@ import { useCallback, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
 
 interface Props {
-  headings: ReturnType<typeof getHeadings>;
+  toc: SingleToc[];
+  tocLength: number;
 }
 
-const PostTOC = ({ headings }: Props) => {
+const TocItem = ({ item }: { item: SingleToc }) => {
+  return (
+    <li key={item.head}>
+      <Anchor href={item.link} external={false}>
+        {item.head}
+      </Anchor>
+    </li>
+  );
+};
+const TocList = ({
+  toc,
+  children,
+}: {
+  toc: SingleToc[];
+  children?: React.ReactElement;
+}) => {
+  return (
+    <ul className="pl-4 border-l-4 border-gray-300 toc">
+      {toc.map((h) => (
+        <>
+          <TocItem key={h.head} item={h} />
+          {children}
+        </>
+      ))}
+    </ul>
+  );
+};
+
+const PostToc = ({ toc, tocLength }: Props) => {
   const [show, setShow] = useState(false);
   const handleClick = useCallback(() => setShow((show) => !show), []);
 
@@ -22,7 +51,7 @@ const PostTOC = ({ headings }: Props) => {
           'my-4'
         )}
         style={{
-          maxHeight: show ? (headings?.length ?? 0) * 50 + 70 : 70,
+          maxHeight: show ? (tocLength ?? 0) * 50 + 70 : 70,
         }}
       >
         <h2
@@ -47,18 +76,23 @@ const PostTOC = ({ headings }: Props) => {
           />
         </h2>
 
-        <ul className="pl-4 border-l-4 border-gray-300 toc">
-          {headings?.map((h) => (
-            <li key={h.link}>
-              <Anchor href={h.link} external={false}>
-                {h.text}
-              </Anchor>
-            </li>
-          ))}
-        </ul>
+        <div className="pl-4 border-l-4 border-gray-300 toc">
+          <ul className="!pl-[unset]">
+            {toc?.map((h) => (
+              <>
+                <TocItem item={h} key={h.link} />
+                {h.children.map((child) => (
+                  <ul className="!pl-4" key={child.link}>
+                    <TocItem item={child} />
+                  </ul>
+                ))}
+              </>
+            ))}
+          </ul>
+        </div>
       </div>
     </>
   );
 };
 
-export default PostTOC;
+export default PostToc;
diff --git a/layouts/MDXLayout.tsx b/layouts/MDXLayout.tsx
deleted file mode 100644
index af7cd0f..0000000
--- a/layouts/MDXLayout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import dynamic from 'next/dynamic';
-import { MyMatters } from 'types';
-
-const Footer = dynamic(() => import('components/Footer'));
-const HeadBar = dynamic(() => import('components/NavBar'));
-const PostComment = dynamic(() => import('components/post/PostComment'));
-const SlideToc = dynamic(() => import('components/post/SlideToc'));
-
-interface Props extends MyMatters {
-  showTOC?: boolean;
-  children: React.ReactElement;
-}
-
-const MDXLayout = ({ title, date, showTOC = true, children }: Props) => {
-  return (
-    <>
-      <HeadBar />
-
-      <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
-        <h1>{title}</h1>
-        <time>{date}</time>
-        {showTOC && <SlideToc />}
-
-        <article id="post-content">
-          {children}
-          <PostComment />
-        </article>
-      </main>
-
-      <Footer />
-    </>
-  );
-};
-
-export default MDXLayout;
diff --git a/lib/posts.ts b/lib/posts.ts
index 9d8966e..6eeabcb 100644
--- a/lib/posts.ts
+++ b/lib/posts.ts
@@ -4,7 +4,7 @@ import matter from 'gray-matter';
 import { MyMatters, Post } from 'types';
 import { sortByDate } from 'lib/utils';
 
-const dataPath = 'data/posts';
+export const dataPath = 'data/posts';
 
 /**
  * Read post meta info with gray-matter.
diff --git a/lib/utils/index.ts b/lib/utils/index.ts
index c0b9acd..4439f23 100644
--- a/lib/utils/index.ts
+++ b/lib/utils/index.ts
@@ -33,3 +33,45 @@ export const getHeadings = (source: string) => {
     };
   });
 };
+
+export type SingleToc = {
+  level: number;
+  head: string;
+  link: string;
+  children: SingleToc[];
+};
+export const generateToc = (source: string) => {
+  const regex = /^#{2,3}(?!#)(.*)/gm;
+
+  let lastH2: SingleToc | null = null;
+  const toc: SingleToc[] = [];
+
+  source.match(regex)?.map((h) => {
+    const heading = h.split(' ');
+    const level = heading[0].length;
+    const head = h.substring(level + 1);
+    switch (level) {
+      case 2: {
+        lastH2 = {
+          level,
+          head,
+          link: `#${head.toLocaleLowerCase().replace(/ /g, '-')}`,
+          children: [],
+        };
+        toc.push(lastH2);
+        break;
+      }
+      case 3: {
+        lastH2?.children.push({
+          level,
+          head,
+          link: `#${head.toLocaleLowerCase().replace(/ /g, '-')}`,
+          children: [],
+        });
+        break;
+      }
+    }
+  });
+
+  return toc;
+};
diff --git a/pages/p/[slug].tsx b/pages/p/[slug].tsx
index 93b310e..b593a86 100644
--- a/pages/p/[slug].tsx
+++ b/pages/p/[slug].tsx
@@ -8,6 +8,8 @@ import rehypePrism from '@mapbox/rehype-prism';
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
 import dynamic from 'next/dynamic';
+import { generateToc, SingleToc } from 'lib/utils';
+import PostToc from 'components/post/PostToc';
 
 const Footer = dynamic(() => import('components/Footer'));
 const HeadBar = dynamic(() => import('components/NavBar'));
@@ -15,6 +17,8 @@ const PostComment = dynamic(() => import('components/post/PostComment'));
 
 const Slug = ({
   mdxSource,
+  toc,
+  tocLength,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <>
@@ -23,6 +27,7 @@ const Slug = ({
       <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
         <h1>{mdxSource.frontmatter?.title}</h1>
         <time>{mdxSource.frontmatter?.date}</time>
+        <PostToc toc={toc} tocLength={tocLength} />
 
         <article id="post-content">
           <MDXRemote {...mdxSource} components={components as {}} />
@@ -44,6 +49,8 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<{
   mdxSource: MDXRemoteSerializeResult;
+  toc: SingleToc[];
+  tocLength: number;
 }> = async ({ params }) => {
   const slug = params?.slug?.toString();
   if (!slug)
@@ -52,6 +59,12 @@ export const getStaticProps: GetStaticProps<{
     };
 
   const post = await readSinglePost(slug);
+  const toc = generateToc(post);
+  let tocLength = toc.length;
+  toc.forEach(
+    (item) => item.children.length && (tocLength += item.children.length)
+  );
+
   const mdxSource = await serialize(post, {
     mdxOptions: {
       remarkPlugins: [remarkGfm],
@@ -63,9 +76,12 @@ export const getStaticProps: GetStaticProps<{
     parseFrontmatter: true,
     scope: data,
   });
+
   return {
     props: {
       mdxSource,
+      toc,
+      tocLength,
     },
   };
 };
diff --git a/scripts/build-search.mjs b/scripts/build-search.mjs
index 183bf43..886f6ea 100644
--- a/scripts/build-search.mjs
+++ b/scripts/build-search.mjs
@@ -4,17 +4,19 @@ import fs from 'fs';
 import path from 'path';
 import { nanoid } from 'nanoid';
 
+const dataPath = 'data/posts';
+
 /**
  * Build post information for Algolia search.
  * @param filename
  * @returns
  */
 const postLists = () => {
-  const files = fs.readdirSync(path.join('pages/p'));
+  const files = fs.readdirSync(path.join(dataPath));
 
   const myPosts = [];
   files.map((f) => {
-    const content = fs.readFileSync(path.join('pages/p', f), 'utf-8');
+    const content = fs.readFileSync(path.join(dataPath, f), 'utf-8');
     // const { data: meta, content } = matter(markdownWithMeta);
 
     const slug = f.replace(/\.mdx$/, '');
diff --git a/styles/rua.css b/styles/rua.css
index 64b2ddc..e0fde0d 100644
--- a/styles/rua.css
+++ b/styles/rua.css
@@ -93,34 +93,14 @@
 }
 
 #article .toc {
-  @apply hidden dark:bg-rua-gray-700;
-  @apply fixed z-10 p-6 bg-white rounded-md xl:inline-block;
-  @apply translate-x-[110%] top-1/2 -translate-y-1/2;
-  @apply max-h-[85%] overflow-auto;
+  padding-left: 0.8em;
+  @apply my-4;
 }
 
-#article .toc .toc-list .toc-list {
-  padding-left: 1rem;
-  padding-top: 0.5rem;
+#article .toc li {
   list-style-type: none;
 }
 
-#article .toc .toc-list-item {
-  padding-bottom: 0.5rem;
-  @apply transition-all;
-}
-
-#article .toc .toc-list-item:last-child {
-  padding-bottom: 0;
-}
-
-/* #article .toc .toc-link {
-} */
-
-#article .toc .is-active-link {
-  @apply font-semibold;
-}
-
 #article p {
   margin: 1em 0;
 }