add hash to headings (#219)

astro.config.mjs

@@ -1,8 +1,10 @@
 import { defineConfig, passthroughImageService } from 'astro/config';
 import starlight from '@astrojs/starlight';
-import starlightImageZoom from 'starlight-image-zoom'
+import starlightImageZoom from 'starlight-image-zoom';
 import rehypeAstroRelativeMarkdownLinks from "astro-rehype-relative-markdown-links";
-import starlightLinksValidator from 'starlight-links-validator'
+import starlightLinksValidator from 'starlight-links-validator';
+import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 const options = {
 	contentPath: 'src/content/docs',
@@ -31,6 +33,7 @@ export default defineConfig({
 			},
 			customCss: [
 				'./src/styles/custom.css',
+				'./src/styles/headings.css',
 			],
 
       editLink: {
@@ -371,7 +374,17 @@ export default defineConfig({
 		}),
 	],
 	markdown: {
-		rehypePlugins: [[rehypeAstroRelativeMarkdownLinks, options]],
+		rehypePlugins: [
+			[rehypeAstroRelativeMarkdownLinks, options],
+			rehypeHeadingIds,
+			[
+				rehypeAutolinkHeadings,
+				{
+					behavior: 'wrap',
+				},
+			],
+
+		],
 	},
 	redirects: {
 		"/getting-started/test-plans": "/project/plans",

package.json

@@ -25,6 +25,7 @@
     "slugify": "^1.6.6"
   },
   "dependencies": {
+    "@astrojs/markdown-remark": "^6.0.2",
     "@astrojs/starlight": "^0.31.1",
     "@octokit/core": "^5.1.0",
     "@pagefind/default-ui": "^1.3.0",
@@ -38,6 +39,7 @@
     "dotenv": "^16.4.7",
     "gray-matter": "^4.0.3",
     "meilisearch-docsearch": "^0.7.0",
+    "rehype-autolink-headings": "^7.1.0",
     "schema-dts": "^1.1.2",
     "sharp": "^0.33.5",
     "starlight-image-zoom": "^0.10.1",

src/styles/headings.css

@@ -0,0 +1,9 @@
+/* Style the Markdown heading links. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
+    color: var(--sl-color-white);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}