From 1bb382409b33805fd7d7129fb93db071f197d4c5 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Wed, 23 Mar 2022 21:05:57 +0800
Subject: [PATCH] Modify styles * add table of contents plugin

---
 components/Footer.tsx  |  2 +-
 components/NavBar.tsx  |  2 +-
 layouts/MDXLayout.tsx  | 29 +++++++++++++++++++++-
 next.config.mjs        |  5 ++--
 package.json           |  4 ++-
 pages/p/first-post.mdx |  4 +++
 yarn.lock              | 55 ++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6c9c2ed..93a19f7 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -5,7 +5,7 @@ const nowDay = new Date().getFullYear();
 const Footer: FC = () => {
   return (
     <>
-      <footer className="px-10">
+      <footer className="max-w-6xl px-10 mx-auto lg:px-0">
         <div className="h-[2px] bg-slate-500"></div>
         <div className="py-4">
           &copy; 2022-{nowDay} Powered by Next.js 💙 xfy
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index af2102a..38f8553 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -27,7 +27,7 @@ const HeadBar: FC = () => {
       <header
         className={cn(
           'flex justify-between mx-auto',
-          'max-w-6xl p-6 h-[84px]',
+          'max-w-6xl p-6 lg:px-0 h-[84px]',
           'items-center relative'
         )}
       >
diff --git a/layouts/MDXLayout.tsx b/layouts/MDXLayout.tsx
index 608d7b2..278569c 100644
--- a/layouts/MDXLayout.tsx
+++ b/layouts/MDXLayout.tsx
@@ -1,15 +1,42 @@
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
+import { renderToString } from 'react-dom/server';
 
 const Footer = dynamic(() => import('components/Footer'));
 const HeadBar = dynamic(() => import('components/NavBar'));
 
 const MainLayout: FC = ({ children }) => {
+  // const contentString = renderToString(children as any);
+
+  // const getHeadings = (source: string) => {
+  //   const regex = /<h2>(.*?)<\/h2>/g;
+
+  //   if (source.match(regex)) {
+  //     return source.match(regex)?.map((heading) => {
+  //       const headingText = heading.replace('<h2>', '').replace('</h2>', '');
+
+  //       const link = '#' + headingText.replace(/ /g, '_').toLowerCase();
+
+  //       return {
+  //         text: headingText,
+  //         link,
+  //       };
+  //     });
+  //   }
+
+  //   return [];
+  // };
+
+  // const headings = getHeadings(contentString);
+  // console.log(headings);
+
   return (
     <>
       <HeadBar />
 
-      <main id="article">{children}</main>
+      <main id="article" className="max-w-5xl px-8 mx-auto my-10">
+        {children}
+      </main>
 
       <Footer />
     </>
diff --git a/next.config.mjs b/next.config.mjs
index 80acf37..1440ee5 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,13 +1,14 @@
 import remarkFrontmatter from 'remark-frontmatter';
 import mdx from '@next/mdx';
 import rehypePrism from '@mapbox/rehype-prism';
+import remarkToc from 'remark-toc';
 
 const withMDX = mdx({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [remarkFrontmatter],
+    remarkPlugins: [remarkFrontmatter, remarkToc],
     rehypePlugins: [rehypePrism],
-    // providerImportSource: '@mdx-js/react',
+    providerImportSource: '@mdx-js/react',
   },
 });
 
diff --git a/package.json b/package.json
index 6eac7d1..89817a7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.1.0",
+    "@mdx-js/react": "^2.1.0",
     "@next/mdx": "^12.1.0",
     "classnames": "^2.3.1",
     "next": "12.1.0",
@@ -20,7 +21,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "remark-frontmatter": "^4.0.1"
+    "remark-frontmatter": "^4.0.1",
+    "remark-toc": "^8.0.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.2",
diff --git a/pages/p/first-post.mdx b/pages/p/first-post.mdx
index e0e4e75..c4c4ae2 100644
--- a/pages/p/first-post.mdx
+++ b/pages/p/first-post.mdx
@@ -16,4 +16,8 @@ This is my first post.
 console.log('Hello world.');
 ```
 
+### h3
+
+this is h3 test
+
 export default ({ children }) => <Layout>{children}</Layout>;
diff --git a/yarn.lock b/yarn.lock
index 641f691..6607f32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -581,6 +581,14 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+"@mdx-js/react@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.0.tgz#2aca56d3d9d6f1bbee9f3c44bd26890331419953"
+  integrity sha512-RlPnY2WcVe91pOilf3Rmu1pArKj7gSK03uoaMFKjPWTyh9t6t1VYGSX40twlpChNSPmbcQ29D0xvSBOVMWA6yw==
+  dependencies:
+    "@types/mdx" "^2.0.0"
+    "@types/react" ">=16"
+
 "@next/env@12.1.0":
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314"
@@ -822,6 +830,16 @@
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
   integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
 
+"@types/extend@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/@types/extend/-/extend-3.0.1.tgz#923dc2d707d944382433e01d6cc0c69030ab2c75"
+  integrity sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==
+
+"@types/github-slugger@^1.0.0":
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
+  integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmmirror.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -931,6 +949,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@>=16":
+  version "17.0.42"
+  resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.42.tgz#8242b9219bf8a911c47f248e327206fea3f4ee5a"
+  integrity sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -2698,6 +2725,11 @@ git-username@^1.0.0:
     parse-github-url "^1.0.2"
     remote-origin-url "^1.0.0"
 
+github-slugger@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
+  integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -4245,6 +4277,20 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   resolved "https://registry.npmmirror.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
 
+mdast-util-toc@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz#1f38419f5ce774449c8daa87b39a4d940b24be7c"
+  integrity sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==
+  dependencies:
+    "@types/extend" "^3.0.0"
+    "@types/github-slugger" "^1.0.0"
+    "@types/mdast" "^3.0.0"
+    extend "^3.0.0"
+    github-slugger "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit "^3.0.0"
+
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -5432,6 +5478,15 @@ remark-rehype@^10.0.0:
     mdast-util-to-hast "^12.1.0"
     unified "^10.0.0"
 
+remark-toc@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/remark-toc/-/remark-toc-8.0.1.tgz#f3e07ea13734f1c531e3d3460e58babe31d17cd7"
+  integrity sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-toc "^6.0.0"
+    unified "^10.0.0"
+
 remote-origin-url@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/remote-origin-url/-/remote-origin-url-1.0.0.tgz#add020aa5f1a0b37372858e02b323dc28d4cd030"