Merge branch 'main' into feat-noto-sans-eu

packages/foundations/docs/Performance.md

@@ -0,0 +1,67 @@
+# Performance
+
+If you need to improve the performance of your application, you can use the following tips:
+
+## Minify with PurgeCSS and CSSO
+
+When you use the full bundled `.css` file we provide, you could easily reduce the file size by removing unused CSS classes. This can be done with [PurgeCSS](https://purgecss.com/) and [CSSO](https://github.com/css/csso).
+
+Install both with:
+
+```shell
+npm i purgecss csso --save-dev
+```
+
+Next you should create a file, e.g. `purgecss.js` in your project root with the following content:
+
+```javascript
+import { writeFileSync } from "node:fs";
+
+import { PurgeCSS } from "purgecss";
+import { minify } from "csso";
+
+const distFolder = "dist"; // TODO: Change me if you need another folder
+
+new PurgeCSS()
+	.purge({
+		content: [`${distFolder}/**/*.html`, `${distFolder}/**/*.js`],
+		css: [`${distFolder}/**/*.css`],
+		defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+		variables: true,
+		rejectedCss: true,
+		safelist: {
+			variables: [
+				/* TODO: Keep only the densities you need */
+				/-functional-/,
+				/-regular-/,
+				/-expressive-/,
+				/* Keep density & all color properties/variables */
+				/-default$/,
+				/-hovered$/,
+				/-pressed$/
+			],
+			/* Some components require a safelist */
+			greedy: [
+				/db-tabs/ // TODO: Add more components if necessary
+			]
+		}
+	})
+	.then((purgeCSSResult) => {
+		for (const result of purgeCSSResult) {
+			writeFileSync(result.file, minify(result.css).css);
+
+			/* Optional: for debugging */
+			// writeFileSync(`rejected.css`, result.rejectedCss || "");
+		}
+	});
+```
+
+You can run this script with `node purgecss.js` and it will minify your CSS files. You can also add this script to your `package.json` to run after your regular build process:
+
+```json
+{
+	"scripts": {
+		"postbuild": "node purgecss.js"
+	}
+}
+```

showcases/patternhub/data/routes.tsx

@@ -233,7 +233,8 @@ export const ROUTES: NavigationItem[] = [
 				label: 'Testing Overview Table',
 				path: '/foundations/test-table'
 			},
-			{ label: 'IDE Support', path: '/foundations/ide' }
+			{ label: 'IDE Support', path: '/foundations/ide' },
+			{ label: 'Performance', path: '/foundations/performance' }
 		]
 	},
 	{

showcases/patternhub/package.json

@@ -26,7 +26,7 @@
     "@db-ux/core-icons": "0.0.7",
     "dompurify": "3.2.3",
     "highlight.js": "^11.11.1",
-    "next": "15.1.3",
+    "next": "15.1.4",
     "react": "18.3.1",
     "react-archer": "^4.4.0",
     "react-dom": "18.3.1",
@@ -36,14 +36,14 @@
   "devDependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.1.3",
+    "@next/mdx": "^15.1.4",
     "@types/dompurify": "3.2.0",
     "@types/node": "22.10.5",
     "@types/react": "18.3.13",
     "@types/react-dom": "18.3.1",
     "esbuild": "0.24.2",
     "eslint": "8.57.0",
-    "eslint-config-next": "15.1.3",
+    "eslint-config-next": "15.1.4",
     "iframe-resizer": "^5.3.2",
     "open-cli": "^8.0.0",
     "sass": "1.77.4",

showcases/patternhub/pages/foundations/performance/index.mdx

@@ -0,0 +1,7 @@
+import DefaultPage from "../../../components/default-page";
+
+import Readme from "../../../../../packages/foundations/docs/Performance.md";
+
+<Readme />
+
+export default ({ children }) => <DefaultPage>{children}</DefaultPage>;

showcases/patternhub/styles/highlight.scss

@@ -73,7 +73,7 @@ pre:has(.hljs):not(:has(.language-shell)) {
 }
 .hljs-subst {
 	/* prettylights-syntax-storage-modifier-import */
-	color: colors.$db-neutral-bg-basic-level-1-default;
+	color: colors.$db-warning-on-bg-basic-emphasis-90-default;
 }
 .hljs-section {
 	/* prettylights-syntax-markup-heading */