make headings clickable links

astro.config.mts

@@ -1,6 +1,8 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import starlightLinksValidator from "starlight-links-validator";
+import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
 // https://astro.build/config
 export default defineConfig({
@@ -21,7 +23,7 @@ export default defineConfig({
                 github: "https://github.com/Vencord",
                 discord: "https://vencord.dev/discord"
             },
-            customCss: ["./src/style/custom.css"],
+            customCss: ["./src/style/custom.css", "./src/style/headingLinks.css"],
             lastUpdated: true,
             sidebar: [
                 {
@@ -38,5 +40,17 @@ export default defineConfig({
                 }
             ]
         })
-    ]
+    ],
+
+    markdown: {
+        rehypePlugins: [
+            rehypeHeadingIds,
+            [
+                rehypeAutolinkHeadings,
+                {
+                    behavior: "wrap"
+                }
+            ]
+        ]
+    }
 });

package.json

@@ -11,8 +11,10 @@
     },
     "dependencies": {
         "@astrojs/check": "^0.7.0",
+        "@astrojs/markdown-remark": "^5.1.1",
         "@astrojs/starlight": "^0.24.4",
         "astro": "^4.10.2",
+        "rehype-autolink-headings": "^7.1.0",
         "sharp": "^0.32.5",
         "starlight-links-validator": "^0.9.0",
         "typescript": "^5.5.2"

src/style/headingLinks.css

@@ -0,0 +1,8 @@
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
+    color: var(--sl-color-white);
+    text-decoration: none;
+}
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a:hover {
+    text-decoration: underline;
+}