Add new post toc

fix useLayoutEffect warnning

components/RUA/RUASandpack.tsx

@@ -1,4 +1,4 @@
-import { Sandpack, SandpackProps  } from '@codesandbox/sandpack-react';
+import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import { useTheme } from 'next-themes';
 
 interface Props extends SandpackProps {}

components/post/SlideToc.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import tocbot from 'tocbot';
+
+const SlideToc = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    // Waiting the right time.
+    mounted &&
+      tocbot.init({
+        tocSelector: '.toc',
+        contentSelector: '#post-content',
+        headingSelector: 'h1, h2, h3',
+      });
+
+    return () => tocbot.destroy();
+  }, [mounted]);
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <div className="toc"></div>
+      </div>
+    </>
+  );
+};
+
+export default SlideToc;

layouts/MDXLayout.tsx

@@ -1,12 +1,10 @@
 import dynamic from 'next/dynamic';
 import { MyMatters } from 'types';
-import { renderToString } from 'react-dom/server';
-import { getHeadings } from 'lib/utils';
-import PostTOC from 'components/post/PostTOC';
 
 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;
@@ -14,23 +12,17 @@ interface Props extends MyMatters {
 }
 
 const MDXLayout = ({ title, date, showTOC = true, children }: Props) => {
-  const contentString = renderToString(children);
-  const headings = getHeadings(contentString);
-
   return (
     <>
       <HeadBar />
 
-      <main id="article" className="max-w-5xl px-4 mx-auto my-10">
+      <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
-        <article>
+        <h1>{title}</h1>
-          <h1>{title}</h1>
+        <time>{date}</time>
-
+        {showTOC && <SlideToc />}
-          <time>{date}</time>
-
-          {showTOC && <PostTOC headings={headings} />}
 
+        <article id="post-content">
           {children}
-
           <PostComment />
         </article>
       </main>

package.json

@@ -33,7 +33,8 @@
     "rehype-slug": "^5.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "sharp": "^0.30.7"
+    "sharp": "^0.30.7",
+    "tocbot": "^4.18.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

styles/rua.css

@@ -93,14 +93,34 @@
 }
 
 #article .toc {
-  padding-left: 0.8em;
+  @apply hidden dark:bg-rua-gray-700;
-  @apply my-4;
+  @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;
 }
 
-#article .toc li {
+#article .toc .toc-list .toc-list {
+  padding-left: 1rem;
+  padding-top: 0.5rem;
   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 transition-all;
+}
+
 #article p {
   margin: 1em 0;
 }
@@ -116,7 +136,7 @@
   display: block;
   text-align: center;
   @apply text-gray-400 dark:text-gray-600;
-  @apply mt-8 mb-20;
+  @apply mt-8 mb-10;
 }
 
 #article h2,
@@ -301,7 +321,7 @@ h6:hover::before {
   top: -0.5em;
 }
 
-#article ol li {
+#article ol li:not(.toc-list-item) {
   list-style-type: auto;
 }
 
@@ -327,12 +347,12 @@ h6:hover::before {
   list-style-type: lower-roman;
 }
 
-#article div > ol:not([type]) {
+#article div > ol:not([type]):not(.toc-list) {
   list-style-type: decimal;
 }
 
 #article ul,
-#article ol {
+#article ol:not(.toc-list) {
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 2em;

tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
           gray: {
             100: '#aabfc5',
             600: 'rgb(66,66,66)',
+            700: 'hsl(220, 13%, 18%)', // code background in dark
             800: 'rgb(35,38,38)', // card background in dark
             900: 'rgb(24,25,26)', // body background in dark
           },

yarn.lock

@@ -8150,6 +8150,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+tocbot@^4.18.2:
+  version "4.18.2"
+  resolved "https://registry.npmmirror.com/tocbot/-/tocbot-4.18.2.tgz#e98bb4120fae02f0e4a01d3acff03f3db2ba3ad9"
+  integrity sha512-bWUfEYQZ4oFgT+qZYvzlTgbsTmA645ApHbo1iRaOBUeFfy5IpctgAQQjCXbPZy+4RDZ1JJYlIBgoApZMzMaYog==
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"