Add heading id and links

Author: Brijesh Bittu

docs/package.json

@@ -22,6 +22,7 @@
     "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",

docs/src/components/Changelog.tsx

@@ -8,7 +8,14 @@ export async function Changelog() {
     encoding: 'utf-8',
   });
   await file.close();
-  content = content.replaceAll(/<!-(.*?)->/gm, '').replaceAll('<--', '');
+  content = content
+    // Remove the first line as it doesn't make sense on the page
+    .replace('# [Versions](https://mui.com/versions/)', '')
+    .trim()
+    // Manually remove markdown comments and other fragments that MDX
+    // doesn't support.
+    .replaceAll(/<!-(.*?)->/gm, '')
+    .replaceAll('<--', '');
   const MdxContent = await renderMdx(content);
   return <MdxContent components={mdxComponents} />;
 }

docs/src/mdx-components.tsx

@@ -12,7 +12,7 @@ export const mdxComponents: MDXComponents = {
   h1: (props) => (
     <React.Fragment>
       <Styled.Heading {...props} />
-      <title>{getChildrenText(props.children)}</title>
+      <title>{`${getChildrenText(props.children)} · ${process.env.APP_NAME}`}</title>
     </React.Fragment>
   ),
   h2: (props) => (

docs/src/utils/mdx.ts

@@ -8,6 +8,8 @@ import remarkGfm from 'remark-gfm';
 import remarkTypography from 'remark-typography';
 import rehypePrettyCode, { type Theme } from 'rehype-pretty-code';
 import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';
+import rehypeSlug from 'rehype-slug';
+import rehyeAutolinkHeading from 'rehype-autolink-headings';
 
 import { rehypeSubtitle } from './rehype/rehypeSubtitle';
 import { rehypeInlineCode } from './rehype/rehypeInlineCode';
@@ -346,6 +348,8 @@ export async function renderMdx(mdxSource: string) {
     remarkPlugins: [remarkGfm, remarkTypography],
     rehypePlugins: [
       [rehypePrettyCode, prettyCodeOptions],
+      rehypeSlug,
+      rehyeAutolinkHeading,
       rehypeExtractToc,
       rehypeSubtitle,
       rehypeInlineCode,