@glossarist/concept-browser 0.4.2 → 0.4.3

package/README.md

@@ -101,6 +101,29 @@ Replace `IEV` with the uppercase dataset ID.
 
 All dataset configuration lives in a single file. Adding a new dataset requires **zero code changes** — just add an entry to `datasets.yml` and run the pipeline.
 
+### Branding and favicon
+
+The `site-config.yml` `branding` section controls the site's visual identity:
+
+```yaml
+branding:
+  primaryColor: "#d97706"
+  darkColor: "#1a1a2e"
+  logo:
+    path: /logos/my-logo.svg        # URL path served to browsers
+    alt: "My Org"
+    localPath: logos/my-logo.svg     # Local file used as favicon source
+  favicon: logos/my-favicon.svg      # Optional — overrides logo.localPath for favicon generation
+```
+
+During build, favicons are auto-generated from a single SVG source using the [`favicons`](https://npmjs.com/package/favicons) package. The resolution order is:
+
+1. `branding.favicon` — explicit path to favicon source SVG
+2. `branding.logo.localPath` — falls back to the site logo
+3. Package default `public/favicon.svg`
+
+The build produces: `favicon.ico`, `favicon.svg`, `favicon-{16,32,48}x{16,32,48}.png`, `apple-touch-icon-*.png` (all standard iOS sizes), and injects the corresponding `<link>` and `<meta>` tags into `index.html` via a Vite plugin.
+
 ### Full reference
 
 ```yaml

package/cli/index.mjs

@@ -78,7 +78,7 @@ Environment:
   if (!process.env.SITE_CONFIG && !process.env.SITE_ID && named.site) {
     process.env.SITE_ID = named.site;
   }
-  loadSiteConfig(named.site ? [named.site] : []);
+  const { config } = loadSiteConfig(named.site ? [named.site] : []);
 
   if (cmd === 'build' || cmd === 'site') {
     for (const step of ['fetch', 'generate', 'edges']) {
@@ -86,15 +86,62 @@ Environment:
       await commands[step]();
     }
 
-    // Copy package static files (favicon, etc.) to deployment public dir
+    // Generate favicons from site logo
     const fs = await import('fs');
     const publicDir = resolve(process.cwd(), 'public');
     fs.mkdirSync(publicDir, { recursive: true });
-    for (const file of ['favicon.svg']) {
-      const src = resolve(pkgRoot, 'public', file);
-      if (fs.existsSync(src)) {
-        fs.copyFileSync(src, resolve(publicDir, file));
+
+    const branding = config?.branding || {};
+    const faviconSrc =
+      (branding.favicon && resolve(process.cwd(), branding.favicon)) ||
+      (branding.logo?.localPath && resolve(process.cwd(), branding.logo.localPath)) ||
+      resolve(pkgRoot, 'public', 'favicon.svg');
+
+    let faviconHtml = '';
+    if (fs.existsSync(faviconSrc)) {
+      console.log(`\n=== FAVICONS ===\n`);
+      const favicons = (await import('favicons')).default;
+      const source = fs.readFileSync(faviconSrc);
+      const response = await favicons(source, {
+        appName: config?.title || 'Glossarist',
+        background: branding.primaryColor || '#2563eb',
+        theme_color: branding.primaryColor || '#2563eb',
+        icons: {
+          android: false,
+          appleIcon: true,
+          appleStartup: false,
+          favicons: true,
+          windows: false,
+          yandex: false,
+        },
+      });
+
+      // Write all generated images and files to public/
+      for (const img of response.images) {
+        fs.writeFileSync(resolve(publicDir, img.name), img.contents);
+      }
+      for (const file of response.files) {
+        fs.writeFileSync(resolve(publicDir, file.name), file.contents);
+      }
+
+      // Keep the original SVG for dark mode support
+      if (faviconSrc.endsWith('.svg')) {
+        fs.copyFileSync(faviconSrc, resolve(publicDir, 'favicon.svg'));
       }
+
+      faviconHtml = response.html.join('\n    ');
+      // Add SVG favicon
+      if (faviconSrc.endsWith('.svg')) {
+        faviconHtml += '\n    <link rel="icon" type="image/svg+xml" href="/favicon.svg">';
+      }
+      // Write tags for Vite plugin to pick up
+      fs.writeFileSync(resolve(publicDir, 'favicon-links.html'), faviconHtml);
+      console.log(`  Generated ${response.images.length} favicon files`);
+    }
+
+    // Pass favicon tags to Vite via env
+    if (faviconHtml) {
+      process.env.FAVICON_HTML = faviconHtml;
     }
 
     // Run vite build using the package's vite.config.ts

package/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@vue/test-utils": "^2.4.8",
+    "favicons": "^7.2.0",
     "happy-dom": "^20.9.0",
     "typescript": "~5.7.3",
     "vitest": "^4.1.5",

package/vite.config.ts

@@ -8,6 +8,27 @@ const cwd = process.cwd()
 
 const isTest = process.env.VITEST !== undefined
 
+function faviconPlugin() {
+  return {
+    name: 'favicon-inject',
+    transformIndexHtml(html: string) {
+      const tags = process.env.FAVICON_HTML
+      if (!tags) return html
+      const faviconTags = tags.split('\n').map((line: string) => {
+        const m = line.trim().match(/<(\w+)\s+(.*)\/?>/s)
+        if (!m) return null
+        const tag = m[1]
+        const attrs: Record<string, string> = {}
+        for (const [, k, v] of m[2].matchAll(/(\w[\w-]*)="([^"]*)"/g)) {
+          attrs[k] = v
+        }
+        return { tag, attrs, injectTo: 'head' as const }
+      }).filter(Boolean)
+      return { html, tags: faviconTags }
+    },
+  }
+}
+
 export default defineConfig({
   base: process.env.BASE_PATH || '/',
   root: __dirname,
@@ -16,7 +37,7 @@ export default defineConfig({
     outDir: resolve(cwd, 'dist'),
     emptyOutDir: true,
   },
-  plugins: [vue()],
+  plugins: [faviconPlugin(), vue()],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),