@glossarist/concept-browser 0.5.1 → 0.7.0

package/src/views/DatasetView.vue

@@ -6,12 +6,14 @@ import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
+import { useI18n } from '../i18n';
 
 const props = defineProps<{ registerId: string }>();
 
 const store = useVocabularyStore();
 const { getStyle } = useDsStyle();
 const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(props.registerId));
 const adapter = computed(() => store.datasets.get(props.registerId));
@@ -180,7 +182,7 @@ function goToPage(p: number) {
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Breadcrumb -->
     <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">{{ manifest?.title || registerId }}</span>
     </nav>
@@ -190,21 +192,21 @@ function goToPage(p: number) {
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ manifest.title }}</h1>
       <p class="text-ink-400 leading-relaxed max-w-2xl">{{ manifest.description }}</p>
       <div class="flex flex-wrap gap-2 mt-4">
-        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} concepts</span>
-        <span class="badge badge-gray">{{ manifest.languages.length }} languages</span>
+        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</span>
+        <span class="badge badge-gray">{{ manifest.languages.length }} {{ t('dataset.languages') }}</span>
         <span class="badge badge-green">{{ manifest.owner }}</span>
         <router-link :to="{ name: 'stats', params: { registerId } }" class="badge badge-blue hover:opacity-80 transition-opacity">
-          Statistics
+          {{ t('nav.stats') }}
         </router-link>
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
-          About
+          {{ t('nav.about') }}
         </router-link>
       </div>
     </div>
 
     <!-- Downloads -->
     <div v-if="bulkDownloads.length" class="card p-4 mb-6">
-      <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wide mb-3">Download</h3>
+      <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wide mb-3">{{ t('dataset.download') }}</h3>
       <div class="flex flex-wrap gap-2">
         <a
           v-for="dl in bulkDownloads"
@@ -237,11 +239,11 @@ function goToPage(p: number) {
     <!-- Error state -->
     <div v-else-if="localError" class="max-w-xl mx-auto text-center py-20">
       <div class="card p-8 border-red-200 bg-red-50/50">
-        <p class="text-red-700 font-medium mb-1">Failed to load dataset</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('dataset.failedToLoad') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
         <div class="flex gap-2 justify-center">
-          <button @click="ensureLoaded" class="btn-primary">Retry</button>
-          <router-link :to="{ name: 'home' }" class="btn-secondary">Back to home</router-link>
+          <button @click="ensureLoaded" class="btn-primary">{{ t('dataset.retry') }}</button>
+          <router-link :to="{ name: 'home' }" class="btn-secondary">{{ t('dataset.backToHome') }}</router-link>
         </div>
       </div>
     </div>
@@ -255,7 +257,7 @@ function goToPage(p: number) {
             v-model="filter"
             type="text"
             aria-label="Filter concepts"
-            placeholder="Filter concepts... (press /)"
+            placeholder="Filter concepts..."
             class="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 w-full sm:w-64"
           />
           <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -264,16 +266,16 @@ function goToPage(p: number) {
         </div>
         <span class="text-sm text-ink-400">
           <template v-if="selectedLang">
-            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts in {{ langName(selectedLang) }}
+            {{ filtered.length.toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }} {{ t('dataset.in') }} {{ langName(selectedLang) }}
           </template>
           <template v-else-if="filter.trim()">
-            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
+            {{ filtered.length.toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
           <template v-else-if="totalPages > 1">
-            {{ ((page - 1) * perPage + 1).toLocaleString() }}–{{ Math.min(page * perPage, totalConceptCount).toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
+            {{ ((page - 1) * perPage + 1).toLocaleString() }}–{{ Math.min(page * perPage, totalConceptCount).toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
           <template v-else>
-            {{ totalConceptCount.toLocaleString() }} concepts
+            {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
         </span>
       </div>
@@ -289,7 +291,7 @@ function goToPage(p: number) {
           ]"
           class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
         >
-          All {{ totalConceptCount.toLocaleString() }}
+          {{ t('dataset.all') }} {{ totalConceptCount.toLocaleString() }}
         </button>
         <button
           v-for="lang in languageOptions"
@@ -333,11 +335,11 @@ function goToPage(p: number) {
       <div v-else class="text-center py-20">
         <div class="text-ink-200 text-5xl mb-4 font-serif">&empty;</div>
         <template v-if="filter.trim()">
-          <p class="text-ink-500 font-medium mb-1">No concepts match your filter</p>
-          <button @click="filter = ''" class="text-sm concept-link mt-1">Clear filter</button>
+          <p class="text-ink-500 font-medium mb-1">{{ t('dataset.noMatch') }}</p>
+          <button @click="filter = ''" class="text-sm concept-link mt-1">{{ t('dataset.clearFilter') }}</button>
         </template>
         <template v-else>
-          <p class="text-ink-500 font-medium mb-1">This dataset has no concepts</p>
+          <p class="text-ink-500 font-medium mb-1">{{ t('dataset.noConcepts') }}</p>
         </template>
       </div>
 
@@ -347,7 +349,7 @@ function goToPage(p: number) {
           :disabled="page <= 1"
           @click="goToPage(page - 1)"
           class="btn-secondary disabled:opacity-30 text-xs"
-        >&larr; Prev</button>
+        >&larr; {{ t('dataset.prev') }}</button>
         <template v-for="p in visiblePages" :key="p">
           <span v-if="p < 0" class="text-ink-300 px-0.5">&hellip;</span>
           <button
@@ -361,7 +363,7 @@ function goToPage(p: number) {
           :disabled="page >= totalPages"
           @click="goToPage(page + 1)"
           class="btn-secondary disabled:opacity-30 text-xs"
-        >Next &rarr;</button>
+        >{{ t('dataset.next') }} &rarr;</button>
       </div>
     </template>
   </div>

package/src/views/GraphView.vue

@@ -2,8 +2,10 @@
 import { computed, onMounted, ref } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import GraphPanel from '../components/GraphPanel.vue';
+import { useI18n } from '../i18n';
 
 const store = useVocabularyStore();
+const { t } = useI18n();
 const graphLoading = ref(true);
 
 // Depend on graphVersion so computed re-evaluates when edges are added
@@ -44,19 +46,19 @@ onMounted(async () => {
   <div class="flex flex-col" style="height: calc(100vh - 56px)">
     <div class="px-4 sm:px-6 py-3 border-b border-ink-100/60 bg-surface-raised flex items-center gap-3 flex-shrink-0">
       <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400">
-        <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">Graph View</span>
+        <span class="text-ink-700">{{ t('nav.graph') }}</span>
       </nav>
       <span class="text-xs text-ink-300 ml-1">
-        {{ graphEdges.length.toLocaleString() }} edges
+        {{ graphEdges.length.toLocaleString() }} {{ t('graph.edges') }}
       </span>
     </div>
     <div class="flex-1 min-h-0">
       <div v-if="graphLoading" class="flex items-center justify-center h-full">
         <div class="text-center">
           <div class="w-8 h-8 border-2 border-ink-200 border-t-ink-600 rounded-full animate-spin mx-auto mb-3"></div>
-          <p class="text-sm text-ink-400">Loading graph data&hellip;</p>
+          <p class="text-sm text-ink-400">{{ t('graph.loading') }}</p>
         </div>
       </div>
       <GraphPanel v-else :nodes="graphNodes" :edges="graphEdges" :registers="registers" />

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 { config: siteConfig, localizedTitle, localizedSubtitle, localizedDescription } = useSiteConfig();
+const { t } = useI18n();
 const exploring = ref(false);
 
 async function exploreRandom() {
@@ -61,29 +63,31 @@ 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">{{ localizedSubtitle }}</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>
+        {{ localizedTitle }}
+        <template v-if="localizedSubtitle"><br class="hidden sm:block" /> {{ localizedSubtitle }}</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.' }}
+        {{ localizedDescription || 'Explore standardized terminology datasets from ISO and IEC technical committees. Browse concepts, definitions, and cross-references across multilingual vocabularies.' }}
       </p>
       <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/NewsView.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { useSiteConfig } from '../config/use-site-config';
 import { renderAsciiDocLite } from '../utils/asciidoc-lite';
+import { useI18n } from '../i18n';
 
 interface NewsPost {
   slug: string;
@@ -13,6 +14,7 @@ interface NewsPost {
 }
 
 const { config } = useSiteConfig();
+const { t } = useI18n();
 const posts = ref<NewsPost[]>([]);
 const loading = ref(true);
 const error = ref<string | null>(null);
@@ -80,7 +82,7 @@ function formatDate(dateStr: string) {
 <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>
       <span class="text-ink-200">/</span>
       <span class="text-ink-700">News</span>
     </nav>

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/src/views/StatsView.vue

@@ -4,12 +4,14 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { langName, langLabel } from '../utils/lang';
+import { useI18n } from '../i18n';
 
 const props = defineProps<{ registerId?: string }>();
 
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
 const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(resolvedId.value));
 
@@ -71,11 +73,11 @@ function coverageColor(ratio: number): string {
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Breadcrumb -->
     <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>
       <router-link :to="{ name: 'dataset', params: { registerId: resolvedId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || resolvedId }}</router-link>
       <span class="text-ink-200">/</span>
-      <span class="text-ink-700">Statistics</span>
+      <span class="text-ink-700">{{ t('stats.title') }}</span>
     </nav>
 
     <template v-if="loading">
@@ -89,15 +91,15 @@ function coverageColor(ratio: number): string {
     </template>
     <template v-else-if="localError">
       <div class="card p-8 border-red-200 bg-red-50/50 text-center">
-        <p class="text-red-700 font-medium mb-1">Failed to load statistics</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('stats.failedToLoad') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
-        <button @click="ensureLoaded" class="btn-primary">Retry</button>
+        <button @click="ensureLoaded" class="btn-primary">{{ t('stats.retry') }}</button>
       </div>
     </template>
     <template v-else-if="manifest">
-      <h1 class="font-serif text-3xl text-ink-800 mb-2">Statistics</h1>
+      <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ t('stats.title') }}</h1>
       <p class="text-ink-400 mb-8">
-        {{ stats.total.toLocaleString() }} concepts across {{ manifest.languages.length }} languages.
+        {{ t('stats.summary', { count: stats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
       </p>
 
       <!-- Language stats table -->
@@ -105,9 +107,9 @@ function coverageColor(ratio: number): string {
         <table class="w-full text-sm">
           <thead>
             <tr class="border-b border-ink-100/60 bg-ink-50">
-              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Language</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Terms</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Definitions</th>
+              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
+              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
+              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
               <th class="px-5 py-3 text-ink-600 font-medium w-40"></th>
             </tr>
           </thead>

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