Make headings clickable via anchors

astro.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeSlug from "rehype-slug";
 
 export default defineConfig({
   site: "https://thiloho.github.io",
@@ -18,6 +20,15 @@ export default defineConfig({
     shikiConfig: {
       theme: "github-dark",
     },
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "wrap",
+        },
+      ],
+    ],
   },
 
   integrations: [sitemap()],

package-lock.json

@@ -13,6 +13,8 @@
         "@tailwindcss/vite": "4.1.4",
         "astro": "5.7.5",
         "markdown-it": "14.1.0",
+        "rehype-autolink-headings": "7.1.0",
+        "rehype-slug": "6.0.0",
         "sanitize-html": "2.16.0",
         "tailwindcss": "4.1.4"
       },
@@ -2731,6 +2733,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-is-element": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
@@ -2834,6 +2849,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/hast-util-to-string": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-text": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
@@ -4700,6 +4728,24 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-autolink-headings": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
+      "integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-parse": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.1.tgz",
@@ -4730,6 +4776,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-stringify": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",

package.json

@@ -15,6 +15,8 @@
     "@tailwindcss/vite": "4.1.4",
     "astro": "5.7.5",
     "markdown-it": "14.1.0",
+    "rehype-autolink-headings": "7.1.0",
+    "rehype-slug": "6.0.0",
     "sanitize-html": "2.16.0",
     "tailwindcss": "4.1.4"
   },

src/layouts/PageLayout.astro

@@ -22,7 +22,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
     <Header {title} {pubDate} {modDate} {slug} />
     <main class="flex-1 bg-white dark:bg-neutral-800">
       <div
-        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 prose-headings:scroll-mt-24 prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline`}
+        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
       >
         <slot />
       </div>