feat: add rehype plugins for automatic heading links and update styles (#2242)

Author: bjohansebas

astro/astro.config.mjs

@@ -7,6 +7,8 @@ import expressiveCode from 'astro-expressive-code';
 import react from '@astrojs/react';
 import svgr from 'vite-plugin-svgr';
 import Icons from 'unplugin-icons/vite';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import redirects from './src/config/redirect.js';
 
 /* https://docs.netlify.com/configure-builds/environment-variables/#read-only-variables */
@@ -18,6 +20,17 @@ const site = NETLIFY_PREVIEW_SITE || 'https://expressjs.com';
 export default defineConfig({
   redirects,
   site,
+  markdown: {
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'wrap',
+        },
+      ],
+    ],
+  },
   vite: {
     plugins: [
       // Transforms SVG files imported with the `?react` suffix into React components

astro/package-lock.json

@@ -30,7 +30,9 @@
     "mdast-util-from-markdown": "^2.0.3",
     "mdast-util-to-string": "^4.0.0",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0"
   },
   "devEngines": {
     "runtime": {

astro/package.json

@@ -133,6 +133,22 @@ small,
   margin: var(--space-body) 0;
 }
 
+/* Heading links (rehype-autolink-headings) */
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
 /* Links */
 a {
   color: var(--color-link);