From 6534a8d330c1e9f2ec8710b6a086d277ee9b6660 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sun, 27 Apr 2025 05:23:27 +0200
Subject: [PATCH] Make headings clickable via anchors
---
astro.config.ts | 11 +++++++
package-lock.json | 63 ++++++++++++++++++++++++++++++++++++
package.json | 2 ++
src/layouts/PageLayout.astro | 2 +-
4 files changed, 77 insertions(+), 1 deletion(-)
diff --git a/astro.config.ts b/astro.config.ts
index 5edd970..1cd2230 100644
--- a/astro.config.ts
+++ b/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()],
diff --git a/package-lock.json b/package-lock.json
index 9477b4f..404fb5a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 18f6bad..3af5672 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 9743333..9462c5d 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -22,7 +22,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;