feat: transform markdown links correctly

packages/foundations/docs/Icons.md

@@ -28,4 +28,4 @@ You could use the CSS Custom Property `--db-icon-color` to overwrite the icons c
 
 If you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.
 
-[More information](https://github.com/db-ui/mono/blob/main/packages/foundations/docs/CustomIcons.md)
+[More information](./CustomIcons.md)

showcases/patternhub/next.config.js

@@ -1,11 +1,12 @@
 import remarkGfm from 'remark-gfm';
 import generated from '@next/mdx';
 import rehypeSlug from 'rehype-slug';
+import remarkTransformLinks from './scripts/remark-transform-links.js';
 
 const withMDX = generated({
 	extension: /\.mdx?$/,
 	options: {
-		remarkPlugins: [remarkGfm],
+		remarkPlugins: [remarkGfm, remarkTransformLinks],
 		rehypePlugins: [rehypeSlug],
 		providerImportSource: '@mdx-js/react'
 	}

showcases/patternhub/package.json

@@ -47,6 +47,7 @@
     "iframe-resizer": "^5.3.2",
     "open-cli": "^8.0.0",
     "sass": "1.77.4",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "unist-util-visit": "^5.0.0"
   }
 }

showcases/patternhub/scripts/remark-transform-links.js

@@ -0,0 +1,17 @@
+import { visit } from 'unist-util-visit';
+
+export default function transformLinks() {
+	return (tree) => {
+		visit(tree, 'link', (node) => {
+			if (node.url.endsWith('.md')) {
+				// Remove the .md extension from the URL and transform it from camelCase to kebab-case
+				// e.g. `customIcons.md` -> `custom-icons`
+				// This is necessary to match the URL of the page generated by Next.js
+				node.url = node.url
+					.replace(/\.md$/, '')
+					.replaceAll(/([a-z])([A-Z])/g, '$1-$2')
+					.toLowerCase();
+			}
+		});
+	};
+}