@glossarist/concept-browser 0.4.1 → 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.1",
+  "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/scripts/generate-data.mjs

@@ -123,9 +123,13 @@ function sourcesToJsonLd(sources) {
       if (s.origin.ref) {
         const ref = s.origin.ref;
         const refObj = { '@type': 'gl:Ref' };
-        if (ref.source) refObj['gl:source'] = ref.source;
-        if (ref.id) refObj['gl:id'] = ref.id;
-        if (ref.version) refObj['gl:version'] = ref.version;
+        if (typeof ref === 'string') {
+          refObj['gl:source'] = ref;
+        } else {
+          if (ref.source) refObj['gl:source'] = ref.source;
+          if (ref.id) refObj['gl:id'] = ref.id;
+          if (ref.version) refObj['gl:version'] = ref.version;
+        }
         origin['gl:ref'] = refObj;
       }
       if (s.origin.locality) {

package/src/adapters/model-bridge.ts

@@ -119,15 +119,19 @@ function mapSourceFromJsonLd(s: any): Record<string, unknown> {
     const o = s['gl:origin'];
     if (o['gl:ref']) {
       const rawRef = o['gl:ref'];
-      const refObj: Record<string, unknown> = {};
-      // v3: ref is always an object { gl:source, gl:id, gl:version }
-      if (rawRef['gl:source']) refObj.source = rawRef['gl:source'];
-      if (rawRef['gl:id']) refObj.id = rawRef['gl:id'];
-      if (rawRef['gl:version']) refObj.version = rawRef['gl:version'];
-      if (rawRef['source']) refObj.source = rawRef['source'];
-      if (rawRef['id']) refObj.id = rawRef['id'];
-      if (rawRef['version']) refObj.version = rawRef['version'];
-      if (Object.keys(refObj).length > 0) origin.ref = refObj;
+      if (typeof rawRef === 'string') {
+        // Legacy format: gl:ref is a plain string (e.g. "ISO/TS 14812:2022")
+        origin.ref = { source: rawRef };
+      } else {
+        const refObj: Record<string, unknown> = {};
+        if (rawRef['gl:source']) refObj.source = rawRef['gl:source'];
+        if (rawRef['gl:id']) refObj.id = rawRef['gl:id'];
+        if (rawRef['gl:version']) refObj.version = rawRef['gl:version'];
+        if (rawRef['source']) refObj.source = rawRef['source'];
+        if (rawRef['id']) refObj.id = rawRef['id'];
+        if (rawRef['version']) refObj.version = rawRef['version'];
+        if (Object.keys(refObj).length > 0) origin.ref = refObj;
+      }
     }
     if (o['gl:locality']) {
       const loc: Record<string, unknown> = {};

package/src/components/GraphPanel.vue

@@ -176,13 +176,14 @@ function buildSimulation(width: number, height: number) {
   const renderNodes = capped ? allVisible.slice(0, MAX_RENDER_NODES) : allVisible;
 
   const simNodes: SimNode[] = renderNodes.map(n => {
-    const desig = Object.values(n.designations)[0] || '';
+    const lang = uiStore.selectedLang;
+    const desig = n.designations[lang] || Object.values(n.designations)[0] || '';
     return {
       uri: n.uri,
       register: n.register,
       conceptId: n.conceptId,
       designation: desig,
-      hasDesignation: !!desig,
+      hasDesignation: !!n.designations[lang],
       loaded: n.loaded,
       nodeType: n.nodeType,
       x: width / 2 + (Math.random() - 0.5) * 200,
@@ -392,6 +393,11 @@ watch(registerEnabled, () => {
   nextTick(rebuildGraph);
 });
 
+// Rebuild when language changes (designation labels depend on language)
+watch(() => uiStore.selectedLang, () => {
+  nextTick(rebuildGraph);
+});
+
 onMounted(() => {
   nextTick(() => {
     if (props.nodes.length > 0) {
@@ -555,7 +561,7 @@ function selectedNodeColor(): string {
       <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
           <h3 class="font-serif text-base text-ink-800 leading-snug truncate">
-            {{ Object.values(selectedNode.designations)[0] || selectedNode.conceptId }}
+            {{ selectedNode.designations[uiStore.selectedLang] || Object.values(selectedNode.designations)[0] || selectedNode.conceptId }}
           </h3>
           <p class="text-xs text-ink-300 font-mono mt-0.5">{{ selectedNode.conceptId }}</p>
           <div class="flex items-center gap-1.5 mt-2">

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'),