feat: headings smooth scroll

src/components/site/PostHeading.tsx

@@ -0,0 +1,19 @@
+import { Element } from "react-scroll"
+
+export const getPostHeading = (tagName: "h2" | "h3" | "h4" | "h5" | "h6") => {
+  const PostHeading: React.FC<
+    {
+      children: React.ReactNode
+    } & React.HTMLAttributes<HTMLHeadingElement>
+  > = ({ children, ...props }) => {
+    const Tag = tagName as any
+    return (
+      <>
+        <Element name={props.id || ""}></Element>
+        <Tag {...props}>{children}</Tag>
+      </>
+    )
+  }
+
+  return PostHeading
+}

src/components/site/PostLink.tsx

@@ -0,0 +1,20 @@
+import { Link } from "react-scroll"
+
+export const PostLink: React.FC<any> = ({ children, ...props }) => {
+  console.log(props.href)
+  if (props.href?.startsWith("#")) {
+    return (
+      <Link
+        to={decodeURI(props.href.slice(1))}
+        spy={true}
+        smooth={true}
+        duration={500}
+        {...props}
+      >
+        {children}
+      </Link>
+    )
+  } else {
+    return <a {...props}>{children}</a>
+  }
+}

src/markdown/index.ts

@@ -26,6 +26,8 @@ import rehypeSlug from "rehype-slug"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 import { toc } from "mdast-util-toc"
 import { PostToc } from "~/components/site/PostToc"
+import { getPostHeading } from "~/components/site/PostHeading"
+import { PostLink } from "~/components/site/PostLink"
 
 export type MarkdownEnv = {
   excerpt: string
@@ -123,7 +125,13 @@ export const renderPageContent = (
       createElement: createElement,
       components: {
         img: Image,
+        a: PostLink,
         toc: PostToc,
+        h2: getPostHeading("h2"),
+        h3: getPostHeading("h3"),
+        h4: getPostHeading("h4"),
+        h5: getPostHeading("h5"),
+        h6: getPostHeading("h6"),
       } as any,
     })
     .processSync(content)