feat: better anchor

src/components/site/PostHeading.tsx

@@ -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
-}

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}

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;

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)

src/markdown/sanitize-schema.ts

@@ -10,6 +10,7 @@ const scheme = {
     "style",
     "youtube",
     "toc",
+    "anchor",
   ],
   attributes: {
     ...defaultSchema.attributes,