add header links

Author: marc-thomas

src/docs-app/ui/components/content/HeaderWithLink.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { Link, Check } from "lucide-react";
+import { cn } from "@/shared/lib/utils.ts";
+
+interface HeaderWithLinkProps {
+  id: string;
+  level: 1 | 2 | 3 | 4;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const HeaderWithLink: React.FC<HeaderWithLinkProps> = ({
+  id,
+  level,
+  children,
+  className,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = async () => {
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for older browsers
+      const textArea = document.createElement("textarea");
+      textArea.value = url;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const baseClasses = "group relative scroll-mt-24 text-foreground";
+  const levelClasses = {
+    1: "text-3xl font-bold mt-12 mb-2 leading-tight",
+    2: "text-2xl font-semibold mt-6 mb-4 leading-snug", 
+    3: "text-xl font-semibold mt-8 mb-3 leading-snug",
+    4: "text-lg font-medium mt-6 mb-2"
+  };
+
+  const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+
+  return (
+    <Tag
+      id={id}
+      className={cn(baseClasses, levelClasses[level], className)}
+    >
+      <span className="flex items-center gap-2">
+        {children}
+        <button
+          onClick={handleCopyLink}
+          className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-muted"
+          title="Copy link to this section"
+          aria-label="Copy link to this section"
+        >
+          {copied ? (
+            <Check className="h-4 w-4 text-green-600" />
+          ) : (
+            <Link className="h-4 w-4 text-muted-foreground hover:text-foreground" />
+          )}
+        </button>
+      </span>
+    </Tag>
+  );
+};
+
+export default HeaderWithLink;

src/docs-app/ui/components/content/MarkdownContent.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import CodeBlock from "@/docs-app/ui/components/content/CodeBlock.tsx";
+import HeaderWithLink from "@/docs-app/ui/components/content/HeaderWithLink.tsx";
 import type { Components } from "react-markdown";
 import type { Root, Element as MdElement, Text as MdText } from "hast"; // Import HAST types
 import {
@@ -113,13 +114,9 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
       const id = generateHeadingId(text);
       return (
         <>
-          <h1
-            id={id}
-            className="text-3xl font-bold mt-12 mb-2 scroll-mt-24 text-foreground leading-tight"
-            {...props}
-          >
+          <HeaderWithLink id={id} level={1} {...props}>
             {children}
-          </h1>
+          </HeaderWithLink>
           <Separator className="mb-2 opacity-60" />
         </>
       );
@@ -128,39 +125,27 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
       return (
-        <h2
-          id={id}
-          className="text-2xl font-semibold mt-6 mb-4 scroll-mt-24 text-foreground leading-snug"
-          {...props}
-        >
+        <HeaderWithLink id={id} level={2} {...props}>
           {children}
-        </h2>
+        </HeaderWithLink>
       );
     },
     h3: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
       return (
-        <h3
-          id={id}
-          className="text-xl font-semibold mt-8 mb-3 scroll-mt-24 text-foreground leading-snug"
-          {...props}
-        >
+        <HeaderWithLink id={id} level={3} {...props}>
           {children}
-        </h3>
+        </HeaderWithLink>
       );
     },
     h4: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
       return (
-        <h4
-          id={id}
-          className="text-lg font-medium mt-6 mb-2 scroll-mt-24 text-foreground"
-          {...props}
-        >
+        <HeaderWithLink id={id} level={4} {...props}>
           {children}
-        </h4>
+        </HeaderWithLink>
       );
     },
     a: ({ node, ...props }) => (