anchors (#1175)

Author: ctate

docs/mdx-components.tsx

@@ -27,13 +27,32 @@ function extractText(children: React.ReactNode): string {
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
+    h1: ({ children }: { children?: React.ReactNode }) => {
+      const id = slugify(extractText(children));
+      return (
+        <h1 id={id} className="heading-anchor">
+          {children}
+          <a href={`#${id}`} aria-label="Link to this section">#</a>
+        </h1>
+      );
+    },
     h2: ({ children }: { children?: React.ReactNode }) => {
       const id = slugify(extractText(children));
-      return <h2 id={id}>{children}</h2>;
+      return (
+        <h2 id={id} className="heading-anchor">
+          {children}
+          <a href={`#${id}`} aria-label="Link to this section">#</a>
+        </h2>
+      );
     },
     h3: ({ children }: { children?: React.ReactNode }) => {
       const id = slugify(extractText(children));
-      return <h3 id={id}>{children}</h3>;
+      return (
+        <h3 id={id} className="heading-anchor">
+          {children}
+          <a href={`#${id}`} aria-label="Link to this section">#</a>
+        </h3>
+      );
     },
     a: ({
       href,

docs/src/app/globals.css

@@ -201,6 +201,27 @@ pre:not(.shiki) {
   color: var(--foreground);
 }
 
+.prose .heading-anchor {
+  position: relative;
+}
+
+.prose .heading-anchor > a {
+  opacity: 0;
+  margin-left: 0.375rem;
+  color: var(--muted-foreground);
+  text-decoration: none;
+  font-weight: 400;
+  transition: opacity 0.15s ease;
+}
+
+.prose .heading-anchor:hover > a {
+  opacity: 1;
+}
+
+.prose .heading-anchor > a:hover {
+  color: var(--foreground);
+}
+
 .prose p {
   margin-bottom: 1rem;
   line-height: 1.65;