Merge branch 'main' into feat-whitelabel

db-ui · Jan 7, 2025 · 833adcc · 833adcc
2 parents 5b9b3c0 + 2dd94c9
commit 833adcc
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 11 deletions.
diff --git a/output/stencil/package.json b/output/stencil/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@stencil/core": "4.23.0",
+    "@stencil/core": "4.23.1",
     "cem-plugin-expanded-types": "^1.3.2",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-vs-code-integration": "^1.4.1",

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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();
+			}
+		});
+	};
+}
diff --git a/showcases/stencil-showcase/package.json b/showcases/stencil-showcase/package.json
@@ -23,7 +23,7 @@
     "@angular/platform-browser": "17.3.12",
     "@angular/platform-browser-dynamic": "17.3.12",
     "@angular/router": "17.3.12",
-    "@stencil/core": "4.23.0",
+    "@stencil/core": "4.23.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "~0.14.10"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)