feat: implement heading anchors

Author: LeadcodeDev

src/lib/components/content/heading/h2.astro

@@ -0,0 +1,32 @@
+---
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+const props = Astro.props;
+const { slug } = Astro.params;
+const { origin, pathname } = Astro.url;
+
+const currentAnchor = `${origin}${pathname}#${props.id}`;
+---
+
+<h2
+  id={props.id}
+  class="relative text-xl text-highlighted font-bold mt-12 mb-6 scroll-mt-6 [&>a]:focus-visible:outline-primary [&>a>code]:!border-dashed [&>a>code]:!bg-secondary/50 hover:[&>a>code]:!border-primary/50 hover:[&>a>code]:!text-primary hover:[&>a>code]:!bg-primary/5 [&>a>code]:text-xl/7 [&>a>code]:!font-bold [&>a>code]:transition-colors"
+>
+  <a
+    href={`/docs/${slug}#${props.id}`}
+    class="group lg:ps-2 lg:-ms-2 !text-inherit !no-underline !font-bold"
+  >
+    <span
+      class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-secondary hover:text-primary rounded-md hidden lg:flex text-muted transition"
+      onclick={`navigator.clipboard.writeText("${currentAnchor}");`}
+    >
+      <Icon
+        client:load
+        icon="lucide:hash"
+        className="size-4 shrink-0"
+        aria-hidden="true"
+      />
+    </span>
+    <slot />
+  </a>
+</h2>

src/lib/components/content/heading/h3.astro

@@ -0,0 +1,32 @@
+---
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+const props = Astro.props;
+const { slug } = Astro.params;
+const { origin, pathname } = Astro.url;
+
+const currentAnchor = `${origin}${pathname}#${props.id}`;
+---
+
+<h3
+  id={props.id}
+  class="relative text-lg text-highlighted font-bold mt-12 mb-6 scroll-mt-6 [&>a]:focus-visible:outline-primary [&>a>code]:!border-dashed [&>a>code]:!bg-secondary/50 hover:[&>a>code]:!border-primary/50 hover:[&>a>code]:!text-primary hover:[&>a>code]:!bg-primary/5 [&>a>code]:text-xl/7 [&>a>code]:!font-bold [&>a>code]:transition-colors"
+>
+  <a
+    href={`/docs/${slug}#${props.id}`}
+    class="group lg:ps-2 lg:-ms-2 !text-inherit !no-underline !font-bold"
+  >
+    <span
+      class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-secondary hover:text-primary rounded-md hidden lg:flex text-muted transition"
+      onclick={`navigator.clipboard.writeText("${currentAnchor}");`}
+    >
+      <Icon
+        client:load
+        icon="lucide:hash"
+        className="size-4 shrink-0"
+        aria-hidden="true"
+      />
+    </span>
+    <slot />
+  </a>
+</h3>

src/pages/docs/[...slug].astro

@@ -17,6 +17,8 @@ import DocNavigationWrapper from "@/components/elements/DocNavigationWrapper.ast
 import { Icon } from "@iconify/react";
 import BlogListWrapper from "@/plugins/blog-list/BlogListWrapper.astro";
 import BlockRenderer from "@/plugins/parser/block-renderer.astro";
+import H2 from "@/components/content/heading/h2.astro";
+import H3 from "@/components/content/heading/h3.astro";
 interface Props {
   element: CollectionEntry<"blog">;
 }
@@ -99,7 +101,13 @@ function pascalCase(str: string) {
 
         <div class="prose">
           <Content
-            components={{ CodeGroupWrapper, BlogListWrapper, BlockRenderer }}
+            components={{
+              CodeGroupWrapper,
+              BlogListWrapper,
+              BlockRenderer,
+              h2: H2,
+              h3: H3,
+            }}
           />
         </div>
 
@@ -108,9 +116,8 @@ function pascalCase(str: string) {
           role="separator"
           class="flex items-center align-center text-center w-full flex-row pt-20"
         >
-          <div class="border-default w-full border-solid border-t"></div><div
-            class="font-medium text-default flex mx-3 whitespace-nowrap"
-          >
+          <div class="border-default w-full border-solid border-t"></div>
+          <div class="font-medium text-default flex mx-3 whitespace-nowrap">
             <div class="flex items-center gap-2 text-sm text-muted-foreground">
               <a
                 href={issueUrl}