feat: auto-link headings

packages/guide/astro.config.ts

@@ -4,9 +4,42 @@ import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 import { remarkCodeHike } from '@code-hike/mdx';
 import { defineConfig } from 'astro/config';
+import { toString } from 'hast-util-to-string';
+import { h } from 'hastscript';
+import { escape } from 'html-escaper';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
 import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json' assert { type: 'json' };
 import Unocss from 'unocss/astro';
 
+const LinkIcon = h(
+	'svg',
+	{
+		width: '1rem',
+		height: '1rem',
+		viewBox: '0 0 24 24',
+		fill: 'none',
+		stroke: 'currentColor',
+		strokeWidth: '2',
+		strokeLinecap: 'round',
+		strokeLinejoin: 'round',
+	},
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+	}),
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+	}),
+);
+
+const createSROnlyLabel = (text: string) => {
+	const node = h('span.sr-only', `Section titled ${escape(text)}`);
+	node.properties!['is:raw'] = true;
+	return node;
+};
+
 export default defineConfig({
 	integrations: [
 		react(),
@@ -20,7 +53,34 @@ export default defineConfig({
 	],
 	markdown: {
 		remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
-		rehypePlugins: [],
+		rehypePlugins: [
+			rehypeSlug,
+			[
+				rehypeAutolinkHeadings,
+				{
+					properties: {
+						class:
+							'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
+					},
+					behavior: 'after',
+					group: ({ tagName }) =>
+						h('div', {
+							class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
+							tabIndex: -1,
+						}),
+					content: (heading) => [
+						h(
+							`span.anchor-icon`,
+							{
+								ariaHidden: 'true',
+							},
+							LinkIcon,
+						),
+						createSROnlyLabel(toString(heading)),
+					],
+				},
+			],
+		],
 		extendDefaultPlugins: true,
 		syntaxHighlight: false,
 	},