docs: improve opengraph and browser meta appearance (#332)

packages/components/.storybook/assets/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "App",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

packages/components/.storybook/manager-head.html

@@ -1 +1,58 @@
-<link href="./images/sds-favicon.png" rel="icon" type="image/png" />
+<link rel="shortcut icon" href="./favicon/favicon.ico" />
+<link rel="apple-touch-icon" sizes="57x57" href="./favicon/apple-icon-57x57.png" />
+<link rel="apple-touch-icon" sizes="60x60" href="./favicon/apple-icon-60x60.png" />
+<link rel="apple-touch-icon" sizes="72x72" href="./favicon/apple-icon-72x72.png" />
+<link rel="apple-touch-icon" sizes="76x76" href="./favicon/apple-icon-76x76.png" />
+<link rel="apple-touch-icon" sizes="114x114" href="./favicon/apple-icon-114x114.png" />
+<link rel="apple-touch-icon" sizes="120x120" href="./favicon/apple-icon-120x120.png" />
+<link rel="apple-touch-icon" sizes="144x144" href="./favicon/apple-icon-144x144.png" />
+<link rel="apple-touch-icon" sizes="152x152" href="./favicon/apple-icon-152x152.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-icon-180x180.png" />
+<link rel="icon" type="image/png" sizes="192x192" href="./favicon/android-icon-192x192.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96x96.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png" />
+<link rel="manifest" href="./favicon/manifest.json" />
+<meta name="msapplication-TileColor" content="#ffffff" />
+<meta name="msapplication-TileImage" content="./favicon/ms-icon-144x144.png" />
+<meta name="theme-color" content="#ffffff" />
+<meta
+  name="description"
+  content="Interactive documentation for Union Investment's Solid Design System, the robust foundation for Union Investment's digital presence."
+/>
+
+<!-- Google / Search Engine Tags -->
+<meta itemprop="name" content="Solid Design System by Union Investment" />
+<meta
+  itemprop="description"
+  content="Interactive documentation for Union Investment's Solid Design System, the robust foundation for Union Investment's digital presence."
+/>
+<meta
+  itemprop="image"
+  content="https://solid-design-system.fe.union-investment.de/x.x.x/storybook/images/sds-signet_meta.png"
+/>
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content="https://solid-design-system.fe.union-investment.de/x.x.x/storybook/index.html" />
+<meta property="og:type" content="website" />
+<meta property="og:title" content="Solid Design System by Union Investment" />
+<meta
+  property="og:description"
+  content="Interactive documentation for Union Investment's Solid Design System, the robust foundation for Union Investment's digital presence."
+/>
+<meta
+  property="og:image"
+  content="https://solid-design-system.fe.union-investment.de/x.x.x/storybook/images/sds-signet_meta.png"
+/>
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="Solid Design System by Union Investment" />
+<meta
+  name="twitter:description"
+  content="Interactive documentation for Union Investment's Solid Design System, the robust foundation for Union Investment's digital presence."
+/>
+<meta
+  name="twitter:image"
+  content="https://solid-design-system.fe.union-investment.de/x.x.x/storybook/images/sds-signet_meta.png"
+/>

packages/components/package.json

@@ -51,7 +51,8 @@
     "build.package": "pnpm build.package/create-index && vite build --config vite.config.package.js && pnpm build.package/remove-index",
     "build.package/create-index": "node scripts/node-generate-package-index.cjs && echo '✅ Index created'",
     "build.package/remove-index": "node -e \"require('fs').unlinkSync('src/solid-components.package.ts')\" && echo '✅ Index removed'",
-    "build.storybook": "storybook build --output-dir dist/storybook && cp dist/custom-elements.json dist/storybook/custom-elements.json",
+    "build.storybook": "storybook build --output-dir dist/storybook && cp dist/custom-elements.json dist/storybook/custom-elements.json && pnpm build.storybook/modify-storybook",
+    "build.storybook/modify-storybook": "node scripts/storybook/node-modify-storybook.cjs",
     "build.chromatic": "pnpm build.storybook && pnpm ci.optimize-chromatic",
     "preview": "vite preview",
     "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test.verify && echo '✅ Test verified'",

packages/components/scripts/storybook/node-modify-storybook.cjs

@@ -0,0 +1,54 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Change the generated browser title to "Solid Design System by Union Investment".
+ */
+const searchDir = 'dist/storybook/sb-manager';
+const searchText = 'u22C5 Storybook';
+const replaceText = 'u22C5 Solid Design System by Union Investment (Storybook)';
+function replaceTextInFiles(directory) {
+  fs.readdir(directory, (err, files) => {
+    if (err) {
+      console.error('❌ Error reading directory:', err);
+      return;
+    }
+    files.forEach(file => {
+      const filePath = path.join(directory, file);
+      fs.readFile(filePath, 'utf8', (err, content) => {
+        if (err) {
+          console.error('❌ Error reading file:', err);
+          return;
+        }
+        const updatedContent = content.replace(new RegExp(searchText, 'g'), replaceText);
+        if (updatedContent !== content) {
+          fs.writeFile(filePath, updatedContent, 'utf8', err => {
+            if (err) {
+              console.error('❌ Error writing file:', err);
+            } else {
+              console.log(`✅ Replaced text in ${file}`);
+            }
+          });
+        }
+      });
+    });
+  });
+}
+replaceTextInFiles(searchDir);
+
+/**
+ * Change the generated index.html document title to "Solid Design System by Union Investment" and remove generated favicon link to use custom tag from manager-header.html.
+ */
+try {
+  const filePath = '../../dist/storybook/index.html';
+  const document = fs.readFileSync(path.resolve(__dirname, filePath), 'utf8');
+  const output = document
+    .replace(/<title>@storybook\/cli - Storybook<\/title>/, `<title>Solid Design System by Union Investment</title>`)
+    .replace(/<link rel="icon" type="image\/svg\+xml" href=".*" \/>/, '');
+  fs.writeFileSync(path.resolve(__dirname, filePath), output);
+  console.log('✅ index.html document rewrite complete.');
+} catch (error) {
+  console.log('❌ Document rewrite failed.');
+  console.error(error);
+  process.exit(1);
+}

packages/components/src/docs/General/1-Introduction.mdx

@@ -1,11 +1,10 @@
 import { Source, Markdown, Meta } from '@storybook/blocks';
 import playwrightVersion from 'playwright-version';
-
-export const cdnBase = 'https://solid-design-system.union-investment.com';
+import pkg from '../../../package.json';
 
 <Meta title="Docs/General/Introduction" />
 
-# Introduction
+# Introduction of Solid Components v{pkg.version}
 
 Solid Components are part of the Solid Design System, serving as a robust foundation for Union Investment's digital presence, built upon three core principles: