[docs] Fix incorrect links in TOC on releases page

docs/next.config.mjs

@@ -9,6 +9,7 @@ import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';
 import remarkGfm from 'remark-gfm';
 import remarkTypography from 'remark-typography';
 import { rehypeQuickNav } from 'docs/src/components/QuickNav/rehypeQuickNav.mjs';
+import { rehypeChangelog } from 'docs/src/components/QuickNav/rehypeChangelog.mjs';
 import { rehypeKbd } from 'docs/src/components/Kbd/rehypeKbd.mjs';
 import { rehypeReference } from 'docs/src/components/ReferenceTable/rehypeReference.mjs';
 import { rehypeDemos } from 'docs/src/components/Demo/rehypeDemos.mjs';
@@ -27,6 +28,7 @@ const withMdx = nextMdx({
       rehypeReference,
       ...rehypeSyntaxHighlighting,
       rehypeSlug,
+      rehypeChangelog,
       rehypeExtractToc,
       rehypeQuickNav,
       rehypeSubtitle,

docs/src/components/QuickNav/rehypeChangelog.mjs

@@ -0,0 +1,38 @@
+import { headingRank } from 'hast-util-heading-rank';
+import { toString } from 'hast-util-to-string';
+import { visit, EXIT } from 'unist-util-visit';
+import { stringToUrl } from './rehypeSlug.mjs';
+
+// Copied from https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
+// Adds `'v'` to beginning to match the headings.
+const SEMVER_PATTERN =
+  /^v(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/gm;
+
+/**
+ * Adds `id`s prefixed with a semver string to changelog headings.
+ */
+export function rehypeChangelog() {
+  return (tree) => {
+    visit(tree, 'element', (node, _, parent) => {
+      if (headingRank(node) === 1 && toString(node) !== 'Releases') {
+        return EXIT;
+      }
+
+      if (headingRank(node) === 3) {
+        let index = parent.children.indexOf(node);
+
+        // eslint-disable-next-line no-plusplus
+        while (index--) {
+          const child = parent.children[index];
+          if (SEMVER_PATTERN.test(toString(child)) && !node.properties.id) {
+            const version = toString(child);
+            node.properties.id = `${version}-${stringToUrl(toString(node))}`;
+          }
+        }
+      } else if (headingRank(node) && !node.properties.id) {
+        node.properties.id = stringToUrl(toString(node));
+      }
+      return undefined;
+    });
+  };
+}

docs/src/components/QuickNav/rehypeSlug.mjs

@@ -1,6 +1,6 @@
 import { headingRank } from 'hast-util-heading-rank';
 import { toString } from 'hast-util-to-string';
-import { visit } from 'unist-util-visit';
+import { visit, EXIT } from 'unist-util-visit';
 
 // This is a fork of https://github.com/rehypejs/rehype-slug/blob/main/lib/index.js, but better
 
@@ -39,8 +39,12 @@ export function rehypeSlug(options) {
   return (tree) => {
     visit(tree, 'element', (node) => {
       if (headingRank(node) && !node.properties.id) {
+        if (headingRank(node) === 1 && toString(node) === 'Releases') {
+          return EXIT;
+        }
         node.properties.id = prefix + stringToUrl(toString(node));
       }
+      return undefined;
     });
   };
 }
@@ -49,7 +53,7 @@ export function rehypeSlug(options) {
  * Converts a string into a well-formatted URL material, taking into account common contractions
  * `"1. Here’s a wicked example & more." => "1-here-is-a-wicked-example-and-more"`
  */
-function stringToUrl(string) {
+export function stringToUrl(string) {
   return string
     .replace(/([a-z])('|’|‘)ll([^a-z])/gi, '$1-will$3') // "you'll, we'll" => "you-will, we-will"
     .replace(/won('|’|‘)t([^a-z])/gi, 'will-not$2') // "won't" => "will-not"