@glossarist/concept-browser 0.5.1 → 0.6.0

package/cli/index.mjs

@@ -148,6 +148,23 @@ Environment:
       process.env.FAVICON_HTML = faviconHtml;
     }
 
+    // Pass branding info for HTML transformation
+    process.env.SITE_TITLE = config?.title || 'Glossarist';
+    if (branding.fonts?.header || branding.fonts?.body) {
+      const fontFamilies = [];
+      if (branding.fonts.header?.source === 'google') {
+        const w = (branding.fonts.header.weights || [400, 700]).join(';');
+        fontFamilies.push(`family=${branding.fonts.header.family.replace(/ /g, '+')}:wght@${w}`);
+      }
+      if (branding.fonts.body?.source === 'google') {
+        const w = (branding.fonts.body.weights || [400, 700]).join(';');
+        fontFamilies.push(`family=${branding.fonts.body.family.replace(/ /g, '+')}:wght@${w}`);
+      }
+      if (fontFamilies.length) {
+        process.env.SITE_FONTS_URL = `https://fonts.googleapis.com/css2?${fontFamilies.join('&')}&display=swap`;
+      }
+    }
+
     // Run vite build using the package's vite.config.ts
     console.log(`\n=== BUILD SPA ===\n`);
     const viteConfig = resolve(pkgRoot, 'vite.config.ts');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/scripts/generate-data.mjs

@@ -591,6 +591,10 @@ function processDataset(dir, register, opts) {
   console.log(`Processing ${register}: ${files.length} files`);
 
   const conceptsDir = path.join(DATA, register, 'concepts');
+  // Clean previous output to avoid stale files accumulating across runs
+  if (fs.existsSync(conceptsDir)) {
+    for (const f of fs.readdirSync(conceptsDir)) fs.unlinkSync(path.join(conceptsDir, f));
+  }
   const concepts = [];
   const langTermCounts = {};
   const langDefCounts = {};
@@ -994,6 +998,19 @@ function renderMarkdown(input) {
       while (i < lines.length && /^>\s?/.test(lines[i])) { ql.push(lines[i].replace(/^>\s?/, '')); i++; }
       blocks.push(`<blockquote>${renderInline(ql.join(' '))}</blockquote>`); continue;
     }
+    if (/^\|(.+)\|$/.test(line) && i + 1 < lines.length && /^\|[-:| ]+\|$/.test(lines[i + 1])) {
+      const headerCells = line.split('|').map(c => c.trim()).filter(Boolean);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && /^\|(.+)\|$/.test(lines[i])) {
+        rows.push(lines[i].split('|').map(c => c.trim()).filter(Boolean));
+        i++;
+      }
+      const thCells = headerCells.map(c => `<th>${renderInline(c)}</th>`).join('');
+      const trRows = rows.map(r => `<tr>${r.map(c => `<td>${renderInline(c)}</td>`).join('')}</tr>`).join('');
+      blocks.push(`<table><thead><tr>${thCells}</tr></thead><tbody>${trRows}</tbody></table>`);
+      continue;
+    }
     if (!line.trim()) { i++; continue; }
     const pl = [];
     while (i < lines.length && lines[i].trim() && !/^#{1,4}\s/.test(lines[i]) && !/^\s*[-*]\s+/.test(lines[i]) && !/^\s*\d+\.\s+/.test(lines[i]) && !/^>\s?/.test(lines[i]) && !lines[i].trimStart().startsWith('```')) { pl.push(lines[i]); i++; }
@@ -1026,6 +1043,29 @@ function processContentPage(config, page) {
   fs.mkdirSync(pagesDir, { recursive: true });
   writeJson(path.join(pagesDir, `${page.route}.json`), { title: page.title, html });
   console.log(`  Generated content page: ${page.route} (${ext})`);
+
+  // Generate localized versions
+  if (page.translations) {
+    for (const [lang, tr] of Object.entries(page.translations)) {
+      const { source, title: trTitle } = tr;
+      if (!source) continue;
+      const trSrcPath = path.resolve(ROOT, source);
+      if (!fs.existsSync(trSrcPath)) {
+        console.warn(`  Skipping '${page.route}' translation '${lang}': source not found (${trSrcPath})`);
+        continue;
+      }
+      const trRaw = fs.readFileSync(trSrcPath, 'utf8');
+      const trExt = path.extname(trSrcPath).toLowerCase();
+      let trHtml;
+      if (trExt === '.html' || trExt === '.htm') {
+        trHtml = trRaw;
+      } else {
+        trHtml = renderMarkdown(stripFrontmatter(trRaw));
+      }
+      writeJson(path.join(pagesDir, `${page.route}.${lang}.json`), { title: trTitle || page.title, html: trHtml });
+      console.log(`  Generated localized page: ${page.route}.${lang} (${trExt})`);
+    }
+  }
 }
 
 function stripFrontmatter(text) {
@@ -1081,6 +1121,7 @@ writeJson(path.join(PUBLIC, 'site-config.json'), {
   description: config.description,
   datasets: config.datasets.map(d => d.id),
   defaultDataset: config.datasets.length === 1 ? config.datasets[0].id : undefined,
+  uiLanguages: config.uiLanguages || undefined,
   branding: siteBranding,
   analytics: config.analytics,
   features: config.features,

package/src/App.vue

@@ -2,12 +2,14 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useVocabularyStore } from './stores/vocabulary';
 import { useSiteConfig } from './config/use-site-config';
+import { useI18n } from './i18n';
 import AppHeader from './components/AppHeader.vue';
 import AppSidebar from './components/AppSidebar.vue';
 import AppFooter from './components/AppFooter.vue';
 
 const store = useVocabularyStore();
 const { loadConfig, config } = useSiteConfig();
+const { initLocale } = useI18n();
 const appReady = ref(false);
 const showScrollTop = ref(false);
 let mainEl: HTMLElement | null = null;
@@ -25,6 +27,7 @@ onMounted(async () => {
   if (cfg?.title) {
     document.title = cfg.title;
   }
+  initLocale(cfg?.defaults?.language);
   appReady.value = true;
   // Watch scroll on main content area
   mainEl = document.querySelector('main');

package/src/__tests__/markdown-lite.test.ts

@@ -85,4 +85,30 @@ describe('renderMarkdown', () => {
     expect(result).toContain('<p>line one line two</p>');
     expect(result).toContain('<p>new paragraph</p>');
   });
+
+  it('renders markdown tables', () => {
+    const input = '| Name | Value |\n|------|-------|\n| a | 1 |\n| b | 2 |';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<table>');
+    expect(result).toContain('<thead>');
+    expect(result).toContain('<th>Name</th>');
+    expect(result).toContain('<th>Value</th>');
+    expect(result).toContain('<tbody>');
+    expect(result).toContain('<td>a</td>');
+    expect(result).toContain('<td>b</td>');
+    expect(result).toContain('</table>');
+  });
+
+  it('renders table cells with inline formatting', () => {
+    const input = '| Col |\n|-----|\n| **bold** |';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<td><strong>bold</strong></td>');
+  });
+
+  it('does not treat non-table pipe lines as tables', () => {
+    const input = 'some text | with pipes';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<p>');
+    expect(result).not.toContain('<table>');
+  });
 });

package/src/components/AppFooter.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 const { config } = useSiteConfig();
+const { t } = useI18n();
 
 const poweredBy = computed(() => {
   const pb = config.value?.features?.poweredBy as { message?: string; url?: string } | undefined;
-  return { message: pb?.message || 'Built with the Glossarist Concept Browser', url: pb?.url || 'https://github.com/glossarist/concept-browser' };
+  return { message: pb?.message || t('footer.builtWith'), url: pb?.url || 'https://github.com/glossarist/concept-browser' };
 });
 
 const socialLinks = computed(() => {

package/src/components/AppHeader.vue

@@ -3,13 +3,23 @@ import { useRouter } from 'vue-router';
 import { useUiStore } from '../stores/ui';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useSiteConfig } from '../config/use-site-config';
-import { ref } from 'vue';
+import { useI18n } from '../i18n';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 
 const router = useRouter();
 const ui = useUiStore();
 const store = useVocabularyStore();
 const { config: siteConfig } = useSiteConfig();
+const { locale, t, setLocale } = useI18n();
 const searchInput = ref('');
+const langOpen = ref(false);
+
+const uiLanguages = computed(() => siteConfig.value?.uiLanguages || []);
+const showLangSelector = computed(() => uiLanguages.value.length > 1);
+const currentLangLabel = computed(() => {
+  const cur = uiLanguages.value.find(l => l.code === locale.value);
+  return cur?.label || locale.value.toUpperCase();
+});
 
 function doSearch() {
   const q = searchInput.value.trim();
@@ -22,6 +32,18 @@ function doSearch() {
 function goHome() {
   router.push({ name: 'home' });
 }
+
+function selectLang(code: string) {
+  setLocale(code);
+  langOpen.value = false;
+}
+
+function closeLangOnOutside(e: MouseEvent) {
+  if (langOpen.value) langOpen.value = false;
+}
+
+onMounted(() => document.addEventListener('click', closeLangOnOutside));
+onBeforeUnmount(() => document.removeEventListener('click', closeLangOnOutside));
 </script>
 
 <template>
@@ -64,8 +86,8 @@ function goHome() {
           <input
             v-model="searchInput"
             type="text"
-            aria-label="Search concepts"
-            placeholder="Search..."
+            :aria-label="t('search.conceptSearch')"
+            :placeholder="t('search.placeholder')"
             class="w-full pl-9 pr-3 py-2 text-sm bg-surface border border-ink-100 rounded-lg focus:ring-2 focus:ring-ink-200 focus:border-ink-400 outline-none placeholder:text-ink-300 transition-all"
           />
           <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -76,7 +98,27 @@ function goHome() {
 
       <!-- Stats -->
       <div class="text-xs text-ink-400 flex-shrink-0 hidden md:block">
-        {{ store.datasetList.length }} datasets
+        {{ store.datasetList.length }} {{ t('header.datasets') }}
+      </div>
+
+      <!-- Language selector -->
+      <div v-if="showLangSelector" class="relative flex-shrink-0" @click.stop>
+        <button
+          @click="langOpen = !langOpen"
+          class="px-2.5 py-1 rounded-lg text-xs font-semibold text-ink-500 hover:text-ink-700 hover:bg-ink-50 transition-colors border border-ink-100 flex items-center gap-1"
+        >
+          {{ currentLangLabel }}
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+        </button>
+        <div v-if="langOpen" class="absolute right-0 top-full mt-1 bg-surface-raised border border-ink-100 rounded-lg shadow-lg py-1 min-w-[120px] z-50">
+          <button
+            v-for="lang in uiLanguages"
+            :key="lang.code"
+            @click="selectLang(lang.code)"
+            class="w-full text-left px-3 py-1.5 text-sm transition-colors"
+            :class="locale === lang.code ? 'bg-ink-50 text-ink-800 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+          >{{ lang.label }}</button>
+        </div>
       </div>
 
       <!-- Theme toggle -->

package/src/components/AppSidebar.vue

@@ -7,6 +7,7 @@ import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
 import { useOntologyNav, compactToSlug } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
+import { useI18n } from '../i18n';
 
 const store = useVocabularyStore();
 const ui = useUiStore();
@@ -14,6 +15,7 @@ const router = useRouter();
 const route = useRoute();
 const { getColor } = useDsStyle();
 const { globalPages, datasetPages, config: siteConfig } = useSiteConfig();
+const { t } = useI18n();
 
 const currentDataset = computed(() => route.params.registerId as string ?? '');
 
@@ -139,7 +141,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
   >
     <div class="p-4">
       <!-- Navigation -->
-      <div class="section-label">Navigation</div>
+      <div class="section-label">{{ t('nav.navigation') }}</div>
       <nav class="space-y-0.5 mb-6">
         <template v-for="page in globalPages" :key="page.route || 'home'">
           <router-link
@@ -439,7 +441,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
       </div>
 
       <!-- Datasets -->
-      <div class="section-label">Datasets</div>
+      <div class="section-label">{{ t('nav.datasets') }}</div>
       <nav class="space-y-1">
         <button
           v-for="ds in datasetEntries"
@@ -455,7 +457,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
         >
           <div class="font-medium truncate leading-snug">{{ ds.title }}</div>
           <div v-if="ds.loaded" class="text-xs mt-0.5" :class="currentDataset === ds.id ? 'text-ink-400' : 'text-ink-300'">
-            {{ ds.conceptCount.toLocaleString() }} concepts
+            {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
           </div>
         </button>
       </nav>

package/src/components/ConceptDetail.vue

@@ -21,6 +21,9 @@ import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import CitationDisplay from './CitationDisplay.vue';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   concept: Concept;
@@ -563,7 +566,7 @@ const nonVerbalReps = computed(() => {
               <!-- Notes -->
               <div v-if="lc.notes.length" class="space-y-2">
                 <div v-for="(note, i) in lc.notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Note {{ i + 1 }}</span>
+                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.note') }} {{ i + 1 }}</span>
                   <div class="mt-1" v-html="renderMath(note, renderOpts)"></div>
                 </div>
               </div>
@@ -571,7 +574,7 @@ const nonVerbalReps = computed(() => {
               <!-- Examples -->
               <div v-if="lc.examples.length" class="space-y-2">
                 <div v-for="(ex, i) in lc.examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Example {{ i + 1 }}</span>
+                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.example') }} {{ i + 1 }}</span>
                   <div class="mt-1" v-html="renderMath(ex, renderOpts)"></div>
                 </div>
               </div>
@@ -635,9 +638,9 @@ const nonVerbalReps = computed(() => {
         <div class="w-full lg:w-64 flex-shrink-0 space-y-4 mt-6 lg:mt-0">
           <!-- Relations -->
           <div v-if="outgoingEdges.length || incomingEdges.length" class="card p-5">
-            <div class="section-label">Relations</div>
+            <div class="section-label">{{ t('concept.relations') }}</div>
             <div v-if="outgoingEdges.length" class="mt-3">
-              <div class="text-xs text-ink-300 mb-2">Outgoing ({{ outgoingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
               <div class="space-y-1 max-h-64 overflow-y-auto">
                 <button
                   v-for="edge in outgoingEdges"
@@ -654,7 +657,7 @@ const nonVerbalReps = computed(() => {
               </div>
             </div>
             <div v-if="incomingEdges.length" class="mt-3 pt-3 border-t border-ink-100/60">
-              <div class="text-xs text-ink-300 mb-2">Incoming ({{ incomingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
               <div class="space-y-1 max-h-48 overflow-y-auto">
                 <button
                   v-for="edge in incomingEdges"
@@ -673,7 +676,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Domains -->
           <div v-if="conceptDomains.length" class="card p-5">
-            <div class="section-label">Domains</div>
+            <div class="section-label">{{ t('concept.domains') }}</div>
             <div class="space-y-1 mt-3">
               <div v-for="domain in conceptDomains" :key="domain.slug" class="flex items-center gap-1.5 text-sm">
                 <span class="w-2 h-1.5 rounded inline-block flex-shrink-0" style="background: #8b5cf6;"></span>
@@ -688,7 +691,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Tags -->
           <div v-if="conceptTags.length" class="card p-5">
-            <div class="section-label">Tags</div>
+            <div class="section-label">{{ t('concept.tags') }}</div>
             <div class="flex flex-wrap gap-1.5 mt-3">
               <span v-for="tag in conceptTags" :key="tag" class="badge badge-gray text-[10px]">{{ tag }}</span>
             </div>
@@ -696,7 +699,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Managed concept dates -->
           <div v-if="conceptDates.length" class="card p-5">
-            <div class="section-label">Lifecycle dates</div>
+            <div class="section-label">{{ t('concept.lifecycleDates') }}</div>
             <dl class="mt-3 space-y-1.5 text-xs">
               <div v-for="(d, i) in conceptDates" :key="i" class="flex gap-2">
                 <dt class="text-ink-300 min-w-[70px]">{{ d.type }}</dt>
@@ -707,7 +710,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Managed concept sources -->
           <div v-if="conceptSources.length" class="card p-5">
-            <div class="section-label">Concept sources</div>
+            <div class="section-label">{{ t('concept.conceptSources') }}</div>
             <div class="space-y-2 mt-3">
               <div v-for="(src, i) in conceptSources" :key="i" class="text-xs">
                 <div class="flex items-center gap-1.5 flex-wrap mb-0.5">
@@ -757,7 +760,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Metadata -->
           <div class="card p-5">
-            <div class="section-label">Metadata</div>
+            <div class="section-label">{{ t('concept.metadata') }}</div>
             <dl class="space-y-2 text-xs mt-3">
               <div v-if="managedStatus">
                 <dt class="text-ink-300">Status</dt>

package/src/components/LanguageDetail.vue

@@ -11,6 +11,9 @@ import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
 import CitationDisplay from './CitationDisplay.vue';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   concept: Concept;
@@ -109,7 +112,7 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Designations -->
       <div v-if="designations.length > 0" class="card p-5">
-        <div class="section-label">Designations</div>
+        <div class="section-label">{{ t('concept.designations') }}</div>
         <div class="space-y-2 mt-3">
           <div v-for="(d, i) in designations" :key="i" class="flex items-center gap-2 flex-wrap">
             <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d.designation)"></span>
@@ -138,16 +141,16 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Definition -->
       <div v-if="definition" class="card p-5">
-        <div class="section-label">Definition</div>
+        <div class="section-label">{{ t('concept.definition') }}</div>
         <div class="text-ink-800 leading-relaxed mt-3" v-html="renderMath(definition, renderOpts)"></div>
       </div>
 
       <!-- Notes -->
       <div v-if="notes.length" class="card p-5">
-        <div class="section-label">Notes</div>
+        <div class="section-label">{{ t('concept.notes') }}</div>
         <div class="space-y-3 mt-3">
           <div v-for="(note, i) in notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
-            <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Note {{ i + 1 }}</span>
+            <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.note') }} {{ i + 1 }}</span>
             <div class="mt-1" v-html="renderMath(note, renderOpts)"></div>
           </div>
         </div>
@@ -155,10 +158,10 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Examples -->
       <div v-if="examples.length" class="card p-5">
-        <div class="section-label">Examples</div>
+        <div class="section-label">{{ t('concept.examples') }}</div>
         <div class="space-y-3 mt-3">
           <div v-for="(ex, i) in examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
-            <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Example {{ i + 1 }}</span>
+            <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.example') }} {{ i + 1 }}</span>
             <div class="mt-1" v-html="renderMath(ex, renderOpts)"></div>
           </div>
         </div>
@@ -187,7 +190,7 @@ function handleContentClick(e: MouseEvent) {
             <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(activeLang) }}</span>
           </div>
           <div>
-            <p class="text-sm text-ink-600 font-medium">Term only in {{ langName(activeLang) }}</p>
+            <p class="text-sm text-ink-600 font-medium">{{ t('lang.termOnlyIn') }} {{ langName(activeLang) }}</p>
             <p class="text-xs text-ink-400 mt-1 leading-relaxed">
               This concept has a registered designation in {{ langName(activeLang) }} but no definition or notes.
             </p>
@@ -198,7 +201,7 @@ function handleContentClick(e: MouseEvent) {
 
     <!-- No data for this language -->
     <div v-else class="card p-5 text-center">
-      <p class="text-sm text-ink-400">No data available for {{ langName(activeLang) }}.</p>
+      <p class="text-sm text-ink-400">{{ t('concept.noData') }}</p>
     </div>
   </div>
 </template>

package/src/config/use-site-config.ts

@@ -10,6 +10,7 @@ export interface RuntimeSiteConfig {
   description?: string;
   datasets: string[];
   defaultDataset?: string;
+  uiLanguages?: { code: string; label: string }[];
   branding?: {
     primaryColor?: string;
     darkColor?: string;

package/src/i18n/index.ts

@@ -0,0 +1,49 @@
+import { ref } from 'vue';
+
+// Auto-discover all locale YAML files — adding a new .yml file is all that's needed
+const localeModules = import.meta.glob<{ default: Record<string, string> }>('./locales/*.yml', { eager: true });
+
+const messages: Record<string, Record<string, string>> = {};
+const availableLocales: string[] = [];
+
+for (const path of Object.keys(localeModules)) {
+  const code = path.match(/\/([^/]+)\.yml$/)?.[1];
+  if (code) {
+    messages[code] = localeModules[path].default || {};
+    availableLocales.push(code);
+  }
+}
+
+const DEFAULT_LANG = 'eng';
+const stored = typeof localStorage !== 'undefined'
+  ? (localStorage.getItem('ui-lang') || DEFAULT_LANG)
+  : DEFAULT_LANG;
+const locale = ref(stored);
+
+export function useI18n() {
+  function t(key: string, params?: Record<string, string>): string {
+    let msg = messages[locale.value]?.[key] || messages[DEFAULT_LANG]?.[key] || key;
+    if (params) {
+      for (const [k, v] of Object.entries(params)) {
+        msg = msg.replace(`{${k}}`, v);
+      }
+    }
+    return msg;
+  }
+
+  function setLocale(lang: string) {
+    locale.value = lang;
+    localStorage.setItem('ui-lang', lang);
+  }
+
+  function initLocale(configuredDefault?: string) {
+    const storedLang = localStorage.getItem('ui-lang');
+    if (storedLang && availableLocales.includes(storedLang)) {
+      locale.value = storedLang;
+    } else if (configuredDefault && availableLocales.includes(configuredDefault)) {
+      locale.value = configuredDefault;
+    }
+  }
+
+  return { locale, t, setLocale, initLocale, availableLocales };
+}

package/src/i18n/locales/eng.yml

@@ -0,0 +1,66 @@
+# English UI translations
+# Adding a new language: copy this file, rename to {lang-code}.yml, translate values.
+
+# Navigation
+nav.home: Home
+nav.search: Search
+nav.graph: Graph View
+nav.ontology: Ontology
+nav.concepts: Concepts
+nav.statistics: Statistics
+nav.about: About
+nav.navigation: Navigation
+nav.datasets: Datasets
+
+# Home page
+home.search: Search
+home.graphView: Graph View
+home.surpriseMe: Surprise Me
+home.exploring: Exploring…
+home.datasets: Datasets
+home.concepts: Concepts
+home.languages: Languages
+home.availableDatasets: Available Datasets
+home.clickToBrowse: Click to browse
+home.browseConcepts: Browse concepts
+
+# Search
+search.placeholder: Search...
+search.conceptSearch: Search concepts
+
+# Page view
+page.notFound: Page Not Found
+page.notFoundMsg: 'The page "{name}" does not exist.'
+page.goHome: Go Home
+
+# Concept detail
+concept.definition: Definition
+concept.notes: Notes
+concept.note: Note
+concept.examples: Examples
+concept.example: Example
+concept.sources: Sources
+concept.designations: Designations
+concept.relations: Relations
+concept.classification: Classification
+concept.domains: Domains
+concept.tags: Tags
+concept.metadata: Metadata
+concept.noData: No data available for this language.
+concept.lifecycleDates: Lifecycle dates
+concept.conceptSources: Concept sources
+concept.incoming: Incoming
+concept.outgoing: Outgoing
+
+# Sidebar
+sidebar.overview: Overview
+sidebar.dataset: Dataset
+
+# Footer
+footer.builtWith: Built with the Glossarist Concept Browser
+
+# Header
+header.datasets: datasets
+
+# Language
+lang.termOnlyIn: Term only in

package/src/i18n/locales/fra.yml

@@ -0,0 +1,66 @@
+# Traductions françaises de l'interface
+# French UI translations
+
+# Navigation
+nav.home: Accueil
+nav.search: Recherche
+nav.graph: Vue en graphe
+nav.ontology: Ontologie
+nav.concepts: Concepts
+nav.statistics: Statistiques
+nav.about: À propos
+nav.navigation: Navigation
+nav.datasets: Jeux de données
+
+# Home page
+home.search: Rechercher
+home.graphView: Vue en graphe
+home.surpriseMe: Surprenez-moi
+home.exploring: Exploration…
+home.datasets: Jeux de données
+home.concepts: Concepts
+home.languages: Langues
+home.availableDatasets: Jeux de données disponibles
+home.clickToBrowse: Cliquez pour parcourir
+home.browseConcepts: Parcourir les concepts
+
+# Search
+search.placeholder: Rechercher…
+search.conceptSearch: Rechercher des concepts
+
+# Page view
+page.notFound: Page non trouvée
+page.notFoundMsg: 'La page « {name} » n''existe pas.'
+page.goHome: Aller à l'accueil
+
+# Concept detail
+concept.definition: Définition
+concept.notes: Notes
+concept.note: Note
+concept.examples: Exemples
+concept.example: Exemple
+concept.sources: Sources
+concept.designations: Désignations
+concept.relations: Relations
+concept.classification: Classification
+concept.domains: Domaines
+concept.tags: Étiquettes
+concept.metadata: Métadonnées
+concept.noData: Aucune donnée disponible pour cette langue.
+concept.lifecycleDates: Dates du cycle de vie
+concept.conceptSources: Sources du concept
+concept.incoming: Entrantes
+concept.outgoing: Sortantes
+
+# Sidebar
+sidebar.overview: Vue d'ensemble
+sidebar.dataset: Jeu de données
+
+# Footer
+footer.builtWith: Construit avec le Glossarist Concept Browser
+
+# Header
+header.datasets: jeux de données
+
+# Language
+lang.termOnlyIn: Terme uniquement en

package/src/shims/glossarist-tags.ts

@@ -0,0 +1,10 @@
+/**
+ * Module augmentation for glossarist Concept.tags.
+ * The JS runtime already supports tags (string[]) but the installed
+ * type declarations have not been updated yet. This shim bridges the gap.
+ */
+declare module 'glossarist/models' {
+  interface Concept {
+    tags: string[];
+  }
+}

package/src/style.css

@@ -244,6 +244,18 @@
   .prose-page hr {
     @apply border-ink-100 my-6;
   }
+  .prose-page table,
+  .prose-news table {
+    @apply w-full mb-4 text-sm;
+  }
+  .prose-page th,
+  .prose-news th {
+    @apply text-left font-semibold text-ink-800 px-3 py-2 border-b-2 border-ink-200;
+  }
+  .prose-page td,
+  .prose-news td {
+    @apply px-3 py-2 border-b border-ink-100;
+  }
 }
 
 @layer utilities {

package/src/utils/markdown-lite.ts

@@ -83,6 +83,21 @@ export function renderMarkdown(input: string): string {
       continue;
     }
 
+    // Table
+    if (/^\|(.+)\|$/.test(line) && i + 1 < lines.length && /^\|[-:| ]+\|$/.test(lines[i + 1])) {
+      const headerCells = line.split('|').map(c => c.trim()).filter(Boolean);
+      i += 2; // skip header and separator
+      const rows: string[][] = [];
+      while (i < lines.length && /^\|(.+)\|$/.test(lines[i])) {
+        rows.push(lines[i].split('|').map(c => c.trim()).filter(Boolean));
+        i++;
+      }
+      const thCells = headerCells.map(c => `<th>${renderInline(c)}</th>`).join('');
+      const trRows = rows.map(r => `<tr>${r.map(c => `<td>${renderInline(c)}</td>`).join('')}</tr>`).join('');
+      blocks.push(`<table><thead><tr>${thCells}</tr></thead><tbody>${trRows}</tbody></table>`);
+      continue;
+    }
+
     // Blank line
     if (!line.trim()) {
       i++;

package/src/views/HomeView.vue

@@ -4,11 +4,13 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 const store = useVocabularyStore();
 const router = useRouter();
 const { getStyle } = useDsStyle();
 const { config: siteConfig } = useSiteConfig();
+const { t } = useI18n();
 const exploring = ref(false);
 
 async function exploreRandom() {
@@ -61,12 +63,14 @@ function goToGraph() { router.push({ name: 'graph' }); }
     <div class="mb-10 sm:mb-14">
       <div class="flex items-center gap-2 mb-4">
         <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300">{{ siteConfig?.branding?.ownerName || 'Glossarist' }}</span>
-        <span class="w-4 sm:w-6 h-px bg-ink-200"></span>
-        <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ siteConfig?.subtitle || 'Terminology Register' }}</span>
+        <template v-if="siteConfig?.subtitle">
+          <span class="w-4 sm:w-6 h-px bg-ink-200"></span>
+          <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ siteConfig.subtitle }}</span>
+        </template>
       </div>
       <h1 class="font-serif text-[2rem] sm:text-[2.75rem] text-ink-800 leading-[1.1] mb-4 tracking-tight">
-        {{ siteConfig?.title || 'Glossarist' }}<br class="hidden sm:block" /> <span v-if="siteConfig?.subtitle">{{ siteConfig.subtitle }}</span>
-        <template v-if="!siteConfig?.subtitle">Terminology<br class="hidden sm:block" /> Register</template>
+        {{ siteConfig?.title || 'Glossarist' }}
+        <template v-if="siteConfig?.subtitle"><br class="hidden sm:block" /> {{ siteConfig.subtitle }}</template>
       </h1>
       <p class="text-base text-ink-400 max-w-lg leading-relaxed">
         {{ siteConfig?.description || 'Explore standardized terminology datasets from ISO and IEC technical committees. Browse concepts, definitions, and cross-references across multilingual vocabularies.' }}
@@ -74,16 +78,16 @@ function goToGraph() { router.push({ name: 'graph' }); }
       <div class="flex flex-wrap gap-3 mt-7">
         <button @click="goToSearch" class="btn-primary flex items-center gap-2">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-          Search
+          {{ t('home.search') }}
         </button>
         <button @click="goToGraph" class="btn-secondary flex items-center gap-2">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
-          Graph View
+          {{ t('home.graphView') }}
         </button>
         <button @click="exploreRandom" :disabled="exploring" class="btn-secondary flex items-center gap-2">
           <svg v-if="!exploring" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
           <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
-          {{ exploring ? 'Exploring…' : 'Surprise Me' }}
+          {{ exploring ? t('home.exploring') : t('home.surpriseMe') }}
         </button>
       </div>
     </div>
@@ -92,15 +96,15 @@ function goToGraph() { router.push({ name: 'graph' }); }
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-px bg-ink-100/60 rounded-xl overflow-hidden mb-10 sm:mb-14">
       <div class="bg-surface-raised px-4 sm:px-6 py-5 animate-entrance" style="animation-delay: 80ms">
         <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ filteredDatasets.length }}</div>
-        <div class="text-sm text-ink-400 mt-1">Datasets</div>
+        <div class="text-sm text-ink-400 mt-1">{{ t('home.datasets') }}</div>
       </div>
       <div class="bg-surface-raised px-6 py-5 animate-entrance" style="animation-delay: 140ms">
         <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ totalConcepts.toLocaleString() }}</div>
-        <div class="text-sm text-ink-400 mt-1">Concepts</div>
+        <div class="text-sm text-ink-400 mt-1">{{ t('home.concepts') }}</div>
       </div>
       <div class="bg-surface-raised px-6 py-5 animate-entrance" style="animation-delay: 200ms">
         <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ totalLanguages }}</div>
-        <div class="text-sm text-ink-400 mt-1">Languages</div>
+        <div class="text-sm text-ink-400 mt-1">{{ t('home.languages') }}</div>
       </div>
     </div>
 
@@ -122,14 +126,14 @@ function goToGraph() { router.push({ name: 'graph' }); }
         </p>
         <div class="flex items-center gap-3 pl-6 mb-4">
           <span :style="{ color: getStyle(filteredDatasets[0].id).color }" class="text-sm font-semibold tabular-nums">{{ filteredDatasets[0].manifest.conceptCount.toLocaleString() }}</span>
-          <span class="text-xs text-ink-300">concepts</span>
+          <span class="text-xs text-ink-300">{{ t('home.concepts').toLowerCase() }}</span>
           <span class="text-ink-200 text-xs">&middot;</span>
           <span class="text-sm text-ink-500 tabular-nums">{{ filteredDatasets[0].manifest.languages.length }}</span>
-          <span class="text-xs text-ink-300">languages</span>
+          <span class="text-xs text-ink-300">{{ t('home.languages').toLowerCase() }}</span>
         </div>
         <div class="pl-6">
           <span class="btn-primary inline-flex items-center gap-2">
-            Browse concepts
+            {{ t('home.browseConcepts') }}
             <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
           </span>
         </div>
@@ -137,8 +141,8 @@ function goToGraph() { router.push({ name: 'graph' }); }
     </template>
     <template v-else-if="filteredDatasets.length > 1">
       <div class="flex items-center justify-between mb-5">
-        <div class="section-label mb-0">Available Datasets</div>
-        <span class="text-xs text-ink-300">Click to browse</span>
+        <div class="section-label mb-0">{{ t('home.availableDatasets') }}</div>
+        <span class="text-xs text-ink-300">{{ t('home.clickToBrowse') }}</span>
       </div>
       <div :class="[
         filteredDatasets.length === 2 ? 'max-w-3xl' : '',
@@ -166,10 +170,10 @@ function goToGraph() { router.push({ name: 'graph' }); }
 
           <div class="flex items-center gap-3 pl-[22px] mb-3">
             <span :style="{ color: getStyle(ds.id).color }" class="text-sm font-semibold tabular-nums">{{ ds.manifest.conceptCount.toLocaleString() }}</span>
-            <span class="text-xs text-ink-300">concepts</span>
+            <span class="text-xs text-ink-300">{{ t('home.concepts').toLowerCase() }}</span>
             <span class="text-ink-200 text-xs">&middot;</span>
             <span class="text-sm text-ink-500 tabular-nums">{{ ds.manifest.languages.length }}</span>
-            <span class="text-xs text-ink-300">languages</span>
+            <span class="text-xs text-ink-300">{{ t('home.languages').toLowerCase() }}</span>
           </div>
 
           <div class="flex flex-wrap gap-1.5 pl-[22px] mb-3">

package/src/views/PageView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { useI18n } from '../i18n';
 
 interface PageData {
   title: string;
@@ -8,6 +9,7 @@ interface PageData {
 }
 
 const route = useRoute();
+const { locale, t } = useI18n();
 const registerId = computed(() => route.params.registerId as string | undefined);
 const pageName = computed(() => {
   if (route.params.page) return route.params.page as string;
@@ -19,14 +21,24 @@ const data = ref<PageData | null>(null);
 const loading = ref(true);
 const notFound = ref(false);
 
-onMounted(async () => {
+async function fetchPage() {
+  loading.value = true;
+  notFound.value = false;
+  data.value = null;
+
   const page = pageName.value;
   const dsId = registerId.value;
-
   const base = import.meta.env.BASE_URL;
-  const urls = dsId
-    ? [`${base}pages/${dsId}-${page}.json`, `${base}pages/${page}.json`]
-    : [`${base}pages/${page}.json`];
+
+  // Build candidate URLs: try localized first, then default
+  const langSuffix = locale.value !== 'eng' ? `.${locale.value}` : '';
+  const urls: string[] = [];
+  if (dsId) {
+    if (langSuffix) urls.push(`${base}pages/${dsId}-${page}${langSuffix}.json`);
+    urls.push(`${base}pages/${dsId}-${page}.json`);
+  }
+  if (langSuffix) urls.push(`${base}pages/${page}${langSuffix}.json`);
+  urls.push(`${base}pages/${page}.json`);
 
   for (const url of urls) {
     try {
@@ -40,13 +52,16 @@ onMounted(async () => {
   }
   notFound.value = true;
   loading.value = false;
-});
+}
+
+onMounted(fetchPage);
+watch([pageName, locale], fetchPage);
 </script>
 
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
-      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <template v-if="registerId">
         <span class="text-ink-200">/</span>
         <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ registerId }}</router-link>
@@ -66,9 +81,9 @@ onMounted(async () => {
 
     <template v-else-if="notFound">
       <div class="card p-8 text-center">
-        <h1 class="font-serif text-2xl text-ink-800 mb-2">Page Not Found</h1>
-        <p class="text-ink-500 mb-4">The page "{{ pageName }}" does not exist.</p>
-        <router-link :to="{ name: 'home' }" class="btn-primary">Go Home</router-link>
+        <h1 class="font-serif text-2xl text-ink-800 mb-2">{{ t('page.notFound') }}</h1>
+        <p class="text-ink-500 mb-4">{{ t('page.notFoundMsg', { name: pageName }) }}</p>
+        <router-link :to="{ name: 'home' }" class="btn-primary">{{ t('page.goHome') }}</router-link>
       </div>
     </template>
 

package/src/views/SearchView.vue

@@ -3,10 +3,12 @@ import { ref, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import SearchBar from '../components/SearchBar.vue';
 import { useUiStore } from '../stores/ui';
+import { useI18n } from '../i18n';
 
 const route = useRoute();
 const router = useRouter();
 const ui = useUiStore();
+const { t } = useI18n();
 
 onMounted(() => {
   if (route.query.q && typeof route.query.q === 'string') {
@@ -24,9 +26,9 @@ watch(() => route.query.q, (q) => {
 <template>
   <div class="px-4 sm:px-6 lg:px-8 py-8">
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
-      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
-      <span class="text-ink-700">Search</span>
+      <span class="text-ink-700">{{ t('nav.search') }}</span>
     </nav>
     <SearchBar />
   </div>

package/vite.config.ts

@@ -2,12 +2,24 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
+import yaml from 'js-yaml'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const cwd = process.cwd()
 
 const isTest = process.env.VITEST !== undefined
 
+function yamlPlugin() {
+  return {
+    name: 'yaml-transform',
+    transform(code: string, id: string) {
+      if (!id.endsWith('.yml') && !id.endsWith('.yaml')) return
+      const data = yaml.load(code)
+      return { code: `export default ${JSON.stringify(data)}`, map: null }
+    },
+  }
+}
+
 function faviconPlugin() {
   return {
     name: 'favicon-inject',
@@ -29,6 +41,27 @@ function faviconPlugin() {
   }
 }
 
+function brandingPlugin() {
+  return {
+    name: 'branding-inject',
+    transformIndexHtml(html: string) {
+      let result = html
+      const title = process.env.SITE_TITLE
+      if (title) {
+        result = result.replace(/<title>[^<]*<\/title>/, `<title>${title}</title>`)
+      }
+      const fontsUrl = process.env.SITE_FONTS_URL
+      if (fontsUrl) {
+        result = result.replace(
+          /<link[^>]*href="https:\/\/fonts\.googleapis\.com\/css2\?[^"]*"[^>]*>/,
+          `<link href="${fontsUrl}" rel="stylesheet">`
+        )
+      }
+      return result
+    },
+  }
+}
+
 export default defineConfig({
   base: process.env.BASE_PATH || '/',
   root: __dirname,
@@ -37,7 +70,7 @@ export default defineConfig({
     outDir: resolve(cwd, 'dist'),
     emptyOutDir: true,
   },
-  plugins: [faviconPlugin(), vue()],
+  plugins: [yamlPlugin(), faviconPlugin(), brandingPlugin(), vue()],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),