[components/toc][f]: added rhs toc

site/components/Layout.js

@@ -18,9 +18,9 @@ export default function Layout({ children }) {
       </Head>
       <Nav />
       <main className="max-w-7xl mx-auto px-2 sm:px-6 md:px-8 border-2 border-green-500">
-        <div className="hidden md:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500">
+        {/* <div className="hidden md:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500"> */}
-          <Sidebar />
+        {/*   <Sidebar /> */}
-        </div>
+        {/* </div> */}
           {children}
       </main>
       <footer className="w-full h-24 mt-16">

site/contentlayer.config.ts

@@ -4,6 +4,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import wikiLinkPlugin from "remark-wiki-link-plus"
+import rehypeToc from "@jsdevtools/rehype-toc"
 
 const isValidDate = dateObject => new Date(dateObject)
     .toString() !== 'Invalid Date';
@@ -58,8 +59,12 @@ export default makeSource({
   mdx: {
     remarkPlugins: [
       remarkGfm,
-      [wikiLinkPlugin, { markdownFolder: 'content' }]
+      [ wikiLinkPlugin, { markdownFolder: 'content' } ]
     ],
-    rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeAutolinkHeadings,
+      [ rehypeToc, { position: 'beforeend' } ]
+    ]
   }
 })

site/pages/[...slug].js

@@ -1,41 +1,39 @@
-import MdxPage from '../components/MDX';
+import MdxPage from "../components/MDX";
-import { allOtherPages } from 'contentlayer/generated';
+import { allOtherPages } from "contentlayer/generated";
-import { useMDXComponent } from 'next-contentlayer/hooks';
+import { useMDXComponent } from "next-contentlayer/hooks";
 
+import siteConfig from "../config/siteConfig";
 
 export default function Page({ body, ...rest }) {
   const Component = useMDXComponent(body.code);
   const children = {
     Component,
     frontmatter: {
-      ...rest
+      ...rest,
     },
   };
 
-  return (
+  return <MdxPage children={children} editUrl={editUrl} />;
-      <MdxPage children={children} />
-  );
 }
 
 export const getStaticProps = async ({ params }) => {
   // All pages ending with .md in the /data folder are made available in allOtherPages
   // Based on the specified slug, the correct page is selected
-  const urlPath = params.slug.join('/')
+  const urlPath = params.slug.join("/");
-  const page = allOtherPages.find(p => p._raw.flattenedPath === urlPath)
+  const page = allOtherPages.find((p) => p._raw.flattenedPath === urlPath);
-  return { props: page }
+  return { props: page };
-}
+};
 
 export const getStaticPaths = async () => {
   const paths = allOtherPages.map((page) => {
     // demo => [demo]
     // abc/demo => [abc,demo]
-    const parts = page._raw.flattenedPath.split('/')
+    const parts = page._raw.flattenedPath.split("/");
-    return { params: { slug: parts } }
+    return { params: { slug: parts } };
-  })
+  });
 
   return {
     paths,
     fallback: false,
-  }
+  };
-}
+};
-

site/styles/global.css

@@ -38,3 +38,42 @@ body {
   width: 10rem;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
 }
+
+/* rehype-toc plugin classes */
+.toc {
+  @apply hidden lg:block w-[16rem] p-8 pt-14 fixed top-16 bottom-0 right-[max(0px,50%-40rem)] overflow-y-auto border-2 border-blue-500;
+}
+
+.toc::before {
+  position: absolute;
+  content: "On this page";
+  top: 1.5rem;
+  line-height: 1.125rem;
+  color: white;
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+
+.toc-item {
+  @apply leading-5;
+}
+
+.toc-item-h1 {
+  @apply p-0;
+}
+
+.toc-level {
+  @apply list-none p-0;
+}
+
+.toc-level:not(.toc-level-1) {
+  @apply pl-2
+}
+
+.toc-item .toc-link {
+  @apply text-sm text-slate-400 hover:text-white no-underline break-normal
+}
+
+.toc-link.active {
+  @apply text-yellow-li
+}