Add links to headers

timolins · Dec 30, 2024 · 9c38424 · 9c38424
1 parent 328aba9
commit 9c38424
Show file tree

Hide file tree

Showing 3 changed files with 847 additions and 307 deletions.
diff --git a/site/package.json b/site/package.json
@@ -30,7 +30,7 @@
     "autoprefixer": "^10.4.7",
     "next-compose-plugins": "^2.2.1",
     "remark-gfm": "^3.0.1",
-    "tailwindcss": "^3.1.5",
+    "tailwindcss": "^3.4.17",
     "typescript": "^4.7.4"
   }
 }
diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx
@@ -15,6 +15,48 @@ const components = {
       <a {...props} />
     </Link>
   ),
+  h1: (props) => {
+    const id = props.id || '';
+    return (
+      <h1 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-extrabold !text-toast-900 *:!text-toast-900`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h1>
+    );
+  },
+  h2: (props) => {
+    const id = props.id || '';
+    return (
+      <h2 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-semibold !text-toast-800 *:!text-toast-800`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h2>
+    );
+  },
+  h3: (props) => {
+    const id = props.id || '';
+    return (
+      <h3 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-semibold !text-toast-800 *:!text-toast-800`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h3>
+    );
+  },
   code: (props) =>
     props.className ? (
       <Code className={props.className} snippet={props.children} />