feat: improve heading id slug format

.changeset/tiny-parrots-unite.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Makes generated heading ID slug values more kebab-case friendly

packages/markdown/remark/src/rehype-collect-headings.ts

@@ -55,13 +55,11 @@ export function rehypeHeadingIds(): ReturnType<RehypePlugin> {
 				}
 			});
 
-			node.properties = node.properties || {};
+			node.properties ??= {};
 			if (typeof node.properties.id !== 'string') {
-				let slug = slugger.slug(text);
-
-				if (slug.endsWith('-')) slug = slug.slice(0, -1);
-
-				node.properties.id = slug;
+				const NBSP = /[\u00A0\u2007\u202F]/g;
+				const EXTRA_HYPHENS = /^-+|(?<=-)-+|-+$/g;
+				node.properties.id = slugger.slug(text.replace(NBSP, ' ')).replace(EXTRA_HYPHENS, '');
 			}
 
 			headings.push({ depth, slug: node.properties.id, text });

packages/markdown/remark/test/rehype-collect-headings.test.js

@@ -0,0 +1,72 @@
+import * as assert from 'node:assert/strict';
+import { before, describe, it } from 'node:test';
+import { createMarkdownProcessor } from '../dist/index.js';
+
+describe('rehypeHeadingIds()', () => {
+	let processor;
+
+	before(async () => {
+		processor = await createMarkdownProcessor();
+	});
+
+	describe('generated ID slug', () => {
+		it('treats non-breaking space as space', async () => {
+			/**
+			 * NO-BREAK SPACE ` `, FIGURE SPACE ` `, NARROW NO-BREAK SPACE
+			 * */
+			const NON_BREAKING_SPACES = [' ', ' ', ' '];
+
+			const {
+				metadata: {
+					headings: [heading],
+				},
+			} = await processor.render(markdownHeading(NON_BREAKING_SPACES));
+
+			assert.equal(heading.slug, expectedSlug(NON_BREAKING_SPACES));
+
+			/**
+			 * Helper function
+			 * @param {string[]} nbsp - list of non-breaking spaces
+			 * @returns {string} markdown heading with given `nbsp` list
+			 * */
+			function markdownHeading(nbsp = []) {
+				return `## text${nbsp.join('text')}text`;
+			}
+
+			/**
+			 * Helper function
+			 * @param {string[]} nbsp - list of non-breaking spaces
+			 * @returns {string} expected slug value of `markdownHeading()` with given `nbsp` list
+			 * */
+			function expectedSlug(nbsp = []) {
+				return `text-${nbsp.map(() => 'text').join('-')}`;
+			}
+		});
+
+		it('is in kebab-case', async () => {
+			const EXPECTED_SLUG = 'lorem-ipsum-dolor-sit-amet';
+			const MARKDOWN_HEADING = '## 😄 😄 Lorem 😄 ipsum 😄 😄 😄 dolor ✓ sit   amet 😄 😄';
+
+			const {
+				metadata: {
+					headings: [heading],
+				},
+			} = await processor.render(MARKDOWN_HEADING);
+
+			assert.equal(heading.slug, EXPECTED_SLUG);
+		});
+
+		it('has unique value within given set of headings', async () => {
+			const repeatedMarkdownHeadings = `${'## Lorem ipsum dolor sit amet\n\n'.repeat(3)}`;
+
+			const {
+				metadata: { headings },
+			} = await processor.render(repeatedMarkdownHeadings);
+
+			const numberOfHeadings = headings.length;
+			const numberOfUniqueIdValues = new Set(headings.map(({ slug }) => slug)).size;
+
+			assert.equal(numberOfHeadings, numberOfUniqueIdValues);
+		});
+	});
+});