Merge pull request #45 from gogglesgogs:blog-headings-link

Add permalinks to blog headings

package.json

@@ -44,6 +44,9 @@
 		"postcss": "^8.4.49",
 		"prettier": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.8",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-class-names": "^2.0.0",
+		"rehype-slug": "^6.0.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-gfm": "^4.0.0",
 		"remark-mdx-frontmatter": "^5.0.0",

src/index.css

@@ -31,3 +31,24 @@
 ::-webkit-scrollbar-track {
 	@apply bg-transparent;
 }
+
+.heading {
+	@apply relative text-nowrap;
+}
+
+.heading-link {
+	@apply absolute -left-[40px] top-1/2 -translate-y-1/2 pr-4 opacity-0 transition-opacity duration-300 ease-in-out;
+}
+
+.heading-icon {
+	@apply flex h-6 w-6 items-center justify-center rounded-md ring-1 ring-black dark:ring-white;
+}
+
+h1:hover .heading-link,
+h2:hover .heading-link,
+h3:hover .heading-link,
+h4:hover .heading-link,
+h5:hover .heading-link,
+h6:hover .heading-link {
+	opacity: 1;
+}

vite.config.ts

@@ -4,6 +4,9 @@ import mdx from '@mdx-js/rollup';
 import remarkGfm from 'remark-gfm';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeClassNames from 'rehype-class-names';
 
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
@@ -16,6 +19,60 @@ export default defineConfig({
 					remarkFrontmatter,
 					[remarkMdxFrontmatter, { name: 'metadata' }],
 				],
+				rehypePlugins: [
+					rehypeSlug,
+					[
+						rehypeClassNames,
+						{
+							h1: 'heading',
+							h2: 'heading',
+							h3: 'heading',
+							h4: 'heading',
+							h5: 'heading',
+							h6: 'heading',
+						},
+					],
+					[
+						rehypeAutolinkHeadings,
+						{
+							properties: {
+								className: ['heading-link'],
+								ariaLabel: 'Link to this heading',
+							},
+							content: {
+								type: 'element',
+								tagName: 'span',
+								properties: {
+									className: ['heading-icon'],
+								},
+								children: [
+									{
+										type: 'element',
+										tagName: 'svg',
+										properties: {
+											width: '12',
+											height: '12',
+											fill: 'none',
+											'aria-hidden': 'true',
+										},
+										children: [
+											{
+												type: 'element',
+												tagName: 'path',
+												properties: {
+													d: 'M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10',
+													stroke: 'currentColor',
+													'stroke-width': '1.5',
+													'stroke-linecap': 'round',
+												},
+											},
+										],
+									},
+								],
+							},
+						},
+					],
+				],
 			}),
 		},
 		react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),