From 020ca20e019134a7f4ecfda52d2e8e04bad24002 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 6 Oct 2022 00:25:46 +0100
Subject: [PATCH] feat: better anchor

---
 src/components/site/PostHeading.tsx | 19 ----------------
 src/components/site/PostLink.tsx    |  1 +
 src/css/prose.css                   | 18 +++++++++------
 src/markdown/index.ts               | 34 ++++++++++++++++++-----------
 src/markdown/sanitize-schema.ts     |  1 +
 5 files changed, 34 insertions(+), 39 deletions(-)
 delete mode 100644 src/components/site/PostHeading.tsx

diff --git a/src/components/site/PostHeading.tsx b/src/components/site/PostHeading.tsx
deleted file mode 100644
index 9d9c373f..00000000
--- a/src/components/site/PostHeading.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
-}
diff --git a/src/components/site/PostLink.tsx b/src/components/site/PostLink.tsx
index 5c4bb404..b310e04e 100644
--- a/src/components/site/PostLink.tsx
+++ b/src/components/site/PostLink.tsx
@@ -9,6 +9,7 @@ export const PostLink: React.FC<any> = ({ children, ...props }) => {
         spy={true}
         smooth={true}
         duration={500}
+        offset={-20}
         {...props}
       >
         {children}
diff --git a/src/css/prose.css b/src/css/prose.css
index 014e9967..9ee462c8 100644
--- a/src/css/prose.css
+++ b/src/css/prose.css
@@ -19,21 +19,25 @@
 }
 
 .prose .xlog-anchor {
-  @apply pr-1 -ml-5 text-base align-middle hidden;
+  @apply text-base align-middle h-full;
 }
 
 .prose .xlog-anchor > span {
-  @apply inline-block text-zinc-900;
+  @apply w-5 pr-1 -ml-5 text-zinc-900 hidden;
 }
 
-.prose h2:hover .xlog-anchor,
-.prose h3:hover .xlog-anchor,
-.prose h4:hover .xlog-anchor,
-.prose h5:hover .xlog-anchor,
-.prose h6:hover .xlog-anchor {
+.prose .xlog-anchor > div {
   @apply inline;
 }
 
+.prose h2:hover .xlog-anchor > span,
+.prose h3:hover .xlog-anchor > span,
+.prose h4:hover .xlog-anchor > span,
+.prose h5:hover .xlog-anchor > span,
+.prose h6:hover .xlog-anchor > span {
+  @apply inline-block;
+}
+
 .prose h2 {
   @apply text-3xl font-semibold;
   @apply my-7;
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index ed35d940..be017abc 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -26,8 +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"
+import { Element } from "react-scroll"
 
 export type MarkdownEnv = {
   excerpt: string
@@ -112,13 +112,25 @@ export const renderPageContent = (
         ariaHidden: true,
         tabIndex: -1,
       },
-      content: {
-        type: "element",
-        tagName: "span",
-        properties: {
-          className: ["i-akar-icons:link-chain"],
-        },
-        children: [],
+      content(node) {
+        return [
+          {
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["i-akar-icons:link-chain"],
+            },
+            children: [],
+          },
+          {
+            type: "element",
+            tagName: "anchor",
+            properties: {
+              name: node.properties?.id,
+            },
+            children: [],
+          },
+        ]
       },
     })
     .use(html ? () => (tree: any) => {} : rehypeReact, {
@@ -127,11 +139,7 @@ export const renderPageContent = (
         img: Image,
         a: PostLink,
         toc: PostToc,
-        h2: getPostHeading("h2"),
-        h3: getPostHeading("h3"),
-        h4: getPostHeading("h4"),
-        h5: getPostHeading("h5"),
-        h6: getPostHeading("h6"),
+        anchor: Element,
       } as any,
     })
     .processSync(content)
diff --git a/src/markdown/sanitize-schema.ts b/src/markdown/sanitize-schema.ts
index 6054f27d..c5cd79b9 100644
--- a/src/markdown/sanitize-schema.ts
+++ b/src/markdown/sanitize-schema.ts
@@ -10,6 +10,7 @@ const scheme = {
     "style",
     "youtube",
     "toc",
+    "anchor",
   ],
   attributes: {
     ...defaultSchema.attributes,