From 2dd94c9c1aa469fa2dd9b7bbeba6bf9c3130267e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Tue, 7 Jan 2025 08:28:27 +0100
Subject: [PATCH] feat: transform markdown links correctly (#3644)

* Revert "fix: broken link on icons readme page in patternhub (#2935)"

This reverts commit 506e40c3b42cfd5b3037aba19679cda4c79cef8c.

* refactor: let's transform markdown links correctly
---
 package-lock.json                               |  6 ++++--
 packages/foundations/docs/Icons.md              |  2 +-
 showcases/patternhub/next.config.js             |  3 ++-
 showcases/patternhub/package.json               |  3 ++-
 .../scripts/remark-transform-links.js           | 17 +++++++++++++++++
 5 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 showcases/patternhub/scripts/remark-transform-links.js

diff --git a/package-lock.json b/package-lock.json
index 0297866bbce..d03e437a0eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35601,6 +35601,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
       "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0",
@@ -39922,7 +39923,7 @@
     },
     "showcases/next-showcase": {
       "dependencies": {
-        "next": "*",
+        "next": "latest",
         "react": "18.3.1",
         "react-dom": "18.3.1"
       },
@@ -39973,7 +39974,8 @@
         "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/node_modules/@esbuild/aix-ppc64": {
diff --git a/packages/foundations/docs/Icons.md b/packages/foundations/docs/Icons.md
index 6d7d6ff689d..deba57cc7f4 100644
--- a/packages/foundations/docs/Icons.md
+++ b/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)
diff --git a/showcases/patternhub/next.config.js b/showcases/patternhub/next.config.js
index a06245485aa..54a7ca019ed 100644
--- a/showcases/patternhub/next.config.js
+++ b/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'
 	}
diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json
index cca08d67f68..c4b35613e08 100644
--- a/showcases/patternhub/package.json
+++ b/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"
   }
 }
diff --git a/showcases/patternhub/scripts/remark-transform-links.js b/showcases/patternhub/scripts/remark-transform-links.js
new file mode 100644
index 00000000000..f7ff2ef0ac3
--- /dev/null
+++ b/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();
+			}
+		});
+	};
+}