feat: Remove toc prop from Markdown components and update rendering l…

…ogic
Hayao0819 · Jan 30, 2025 · 466c3fe · 466c3fe
1 parent da7e96c
commit 466c3fe
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/src/components/elements/Markdown/Toc.tsx b/src/components/elements/Markdown/Toc.tsx
@@ -4,8 +4,6 @@ import clsx from "clsx";
 import { default as NextLink } from "next/link";
 import { ComponentPropsWithoutRef, memo, useEffect, useState } from "react";
 
-import Markdown from "./client";
-
 interface TocProps extends ComponentPropsWithoutRef<"div"> {
     contentSelector: string;
 }
@@ -63,25 +61,27 @@ const RenderHeadingTree = ({ tree, indent }: { tree: HeadingTree[]; indent: numb
         1: "",
         2: "",
         3: "ml-2",
+        4: "ml-4",
     };
 
     const isTopLevel = indent === 0;
+    console.log(tree);
 
     return (
         <>
             <ul
-                className={clsx("ml-8", {
+                className={clsx({
                     "marker:text-accent marker:content-['-']": isTopLevel,
                     "marker:content-none": !isTopLevel,
                 })}
+                style={{ marginLeft: `${2 * indent}rem` }}
             >
                 {tree.map((e) => (
                     <li key={e.id} className={clsx(levelClassNames[e.level], { "pl-2": isTopLevel }, "py-1")}>
                         <NextLink href={`#${e.id}`} scroll={true}>
                             {/* {e.text} */}
-                            <div>
-                                <Markdown basepath="" content={e.text} toc />
-                            </div>
+                            {/* <Markdown basepath="" content={e.text} toc /> */}
+                            <span dangerouslySetInnerHTML={{ __html: e.text }} />
                         </NextLink>
                         {e.children.length > 0 ? <RenderHeadingTree tree={e.children} indent={indent + 1} /> : null}
                     </li>
@@ -98,7 +98,10 @@ export const useHeadingTree = (contentSelector: string) => {
         const content = document.querySelector(contentSelector);
         if (!content) return;
 
-        const headingTree = elementsToHeadingTree(Array.from(content.querySelectorAll("h2, h3, h4, h5, h6")));
+        const headingTree = elementsToHeadingTree(Array.from(content.querySelectorAll(
+            // "h2, h3, h4, h5, h6"
+            "h2, h3"
+        )));
         setTree(headingTree);
     }, []);
 

diff --git a/src/components/elements/Markdown/client.tsx b/src/components/elements/Markdown/client.tsx
@@ -18,7 +18,7 @@ const getSerializedResult = (content: string, onlyText: boolean) =>
         },
     });
 
-const Markdown = ({ content, basepath, toc }: MarkdownProps) => {
+const Markdown = ({ content, basepath }: MarkdownProps) => {
     const [serialized, setSerialized] = useState<SerializedResult | null>(null);
     useEffect(() => {
         getSerializedResult(content, false).then(
@@ -31,7 +31,7 @@ const Markdown = ({ content, basepath, toc }: MarkdownProps) => {
         );
     }, []);
 
-    const components = useComponents(basepath, toc);
+    const components = useComponents(basepath);
     return serialized === null ? <p>Loading...</p> : <MDXRemote {...serialized} components={components} />;
 };
 

diff --git a/src/components/elements/Markdown/common.tsx b/src/components/elements/Markdown/common.tsx
@@ -39,7 +39,6 @@ export const rehypePlugins: PluggableList = [
 export interface MarkdownProps {
     content: string;
     basepath: string;
-    toc?: boolean;
     // onlyText?: boolean;
     // render?: "server" | "client";
 }
diff --git a/src/components/elements/Markdown/components.tsx b/src/components/elements/Markdown/components.tsx
@@ -1,6 +1,5 @@
 import "@/style/markdown.css";
 
-import clsx from "clsx";
 import { MDXComponents } from "mdx/types";
 import { ComponentPropsWithoutRef, useMemo } from "react";
 
@@ -11,7 +10,7 @@ import { Link } from "../Link";
 import Tweet from "../Tweet";
 
 // https://stackoverflow.com/questions/78294682/rehype-slug-is-not-adding-ids-to-headings
-export const getComponents = (basepath: string, toc: boolean = false): MDXComponents => {
+export const getComponents = (basepath: string): MDXComponents => {
     return {
         // PropsにidがないとrehypeSlugが動かない
 
@@ -63,7 +62,7 @@ export const getComponents = (basepath: string, toc: boolean = false): MDXCompon
             <p
                 // // @ts-expect-error word-breakでauto-phraseを使うための型定義がない
                 // style={{ wordBreak: "auto-phrase" }}
-                className={clsx({ "py-2": !toc, "leading-none py-1": toc })}
+                className="py-2"
                 id={id}
             >
                 {children}
@@ -117,6 +116,6 @@ export const getComponents = (basepath: string, toc: boolean = false): MDXCompon
     };
 };
 
-export const useComponents = (basepath: string, toc?: boolean) => {
-    return useMemo(() => getComponents(basepath, toc), [basepath, toc]);
+export const useComponents = (basepath: string) => {
+    return useMemo(() => getComponents(basepath), [basepath]);
 };
diff --git a/src/components/elements/Markdown/server.tsx b/src/components/elements/Markdown/server.tsx
@@ -5,7 +5,7 @@ import { MDXRemote } from "next-mdx-remote/rsc";
 import { MarkdownProps, rehypePlugins, remarkPlugins } from "./common";
 import { getComponents } from "./components";
 
-export default async function Markdown({ content, basepath, toc }: MarkdownProps) {
+export default async function Markdown({ content, basepath }: MarkdownProps) {
     // console.log(content);
 
     return (
@@ -17,7 +17,7 @@ export default async function Markdown({ content, basepath, toc }: MarkdownProps
                     rehypePlugins,
                 },
             }}
-            components={getComponents(basepath, toc)}
+            components={getComponents(basepath)}
         />
     );
 }
diff --git a/src/style/markdown.css b/src/style/markdown.css
@@ -32,7 +32,7 @@ span[data-rehype-pretty-code-figure] {
         /* background-color: inherit !important;
         @apply !text-sky-600; */
 
-        @apply px-1 mx-1;
+        /* @apply px-1 mx-1; */
     }
 
     code[data-language="plaintext"] {