@glossarist/concept-browser 0.5.1 → 0.7.0

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/components/SearchBar.vue

@@ -6,11 +6,13 @@ import { ref, watch, onMounted, computed, nextTick } from 'vue';
 import type { SearchHit } from '../adapters/types';
 import { langLabel, langName } from '../utils/lang';
 import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
 
 const router = useRouter();
 const ui = useUiStore();
 const store = useVocabularyStore();
 const { getStyle } = useDsStyle();
+const { t } = useI18n();
 const query = ref('');
 const results = ref<SearchHit[]>([]);
 const searched = ref(false);
@@ -154,7 +156,6 @@ onMounted(() => {
             @input="onInput"
             @keydown="onKeydown"
             type="text"
-            aria-label="Search terms across all datasets"
             placeholder="Search terms across all datasets..."
             class="w-full pl-9 pr-8 py-2.5 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"
             autofocus
@@ -175,7 +176,7 @@ onMounted(() => {
             <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="M6 18L18 6M6 6l12 12"/></svg>
           </button>
         </div>
-        <button type="submit" class="btn-primary" :disabled="loading">Search</button>
+        <button type="submit" class="btn-primary" :disabled="loading">{{ t('search.button') }}</button>
       </div>
     </form>
 
@@ -184,23 +185,23 @@ onMounted(() => {
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
       </svg>
-      <p class="text-sm text-ink-400">Searching across datasets...</p>
+      <p class="text-sm text-ink-400">{{ t('search.searching') }}</p>
     </div>
 
     <div v-else-if="searchError" class="text-center py-16">
       <div class="card p-8 border-red-200 bg-red-50/50 max-w-md mx-auto">
-        <p class="text-red-700 font-medium mb-1">Search failed</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('search.failed') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ searchError }}</p>
-        <button @click="doSearch" class="btn-primary">Retry</button>
+        <button @click="doSearch" class="btn-primary">{{ t('search.retry') }}</button>
       </div>
     </div>
 
     <div v-else-if="searched">
-      <p class="text-sm text-ink-400 mb-4">{{ results.length }} result{{ results.length === 1 ? '' : 's' }} for &ldquo;{{ ui.searchQuery }}&rdquo;</p>
+      <p class="text-sm text-ink-400 mb-4">{{ results.length === 1 ? t('search.oneResultFor', { query: ui.searchQuery }) : t('search.manyResultsFor', { count: String(results.length), query: ui.searchQuery }) }}</p>
       <div v-if="results.length === 0" class="text-center py-16">
         <div class="text-ink-200 text-5xl mb-4 font-serif">&empty;</div>
-        <p class="text-ink-500 font-medium">No concepts found matching your search</p>
-        <p class="text-sm text-ink-300 mt-1">Try a different term or check the spelling.</p>
+        <p class="text-ink-500 font-medium">{{ t('search.noResults') }}</p>
+        <p class="text-sm text-ink-300 mt-1">{{ t('search.tryDifferent') }}</p>
       </div>
 
       <!-- Grouped results -->
@@ -210,7 +211,7 @@ onMounted(() => {
           <div class="flex items-center gap-2 mb-2">
             <span class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: group.style.color }"></span>
             <span class="text-xs font-semibold text-ink-500 uppercase tracking-wide">{{ group.title }}</span>
-            <span class="text-xs text-ink-300">{{ group.hits.length }} result{{ group.hits.length === 1 ? '' : 's' }}</span>
+            <span class="text-xs text-ink-300">{{ group.hits.length }} {{ group.hits.length === 1 ? t('search.result') : t('search.results') }}</span>
           </div>
           <!-- Hits -->
           <div class="space-y-1.5">
@@ -227,7 +228,7 @@ onMounted(() => {
                 <span v-if="hit.snippet" class="block text-xs text-ink-300 mt-0.5 truncate">{{ hit.snippet }}</span>
               </div>
               <div class="flex items-center gap-2 flex-shrink-0">
-                <span v-if="hit.matchField === 'id'" class="badge badge-gray text-[10px]">ID match</span>
+                <span v-if="hit.matchField === 'id'" class="badge badge-gray text-[10px]">{{ t('search.idMatch') }}</span>
                 <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langName(hit.language) }}</span>
               </div>
             </button>
@@ -236,7 +237,7 @@ onMounted(() => {
       </div>
 
       <div v-if="results.length > 100" class="text-center text-sm text-ink-300 mt-6 pt-4 border-t border-ink-100/60">
-        Showing first 100 of {{ results.length }} results. Refine your search for more specific matches.
+        {{ t('search.showingFirst', { max: '100', total: String(results.length) }) }}
       </div>
     </div>
   </div>

package/src/config/types.ts

@@ -91,6 +91,7 @@ export interface DatasetConfig {
   tags?: string[];
   languageOrder?: string[];
   downloads?: string[];
+  translations?: Record<string, { title?: string; description?: string }>;
 }
 
 // === Contributors ===
@@ -141,6 +142,7 @@ export interface SiteConfig {
   title: string;
   subtitle?: string;
   description?: string;
+  translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
   datasets: DatasetConfig[];
   routing: RoutingEntry[];
   branding: SiteBranding;

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

@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue';
 import type { PageConfig } from './types';
+import { locale } from '../i18n';
 
 export interface RuntimeSiteConfig {
   id: string;
@@ -8,8 +9,11 @@ export interface RuntimeSiteConfig {
   title: string;
   subtitle?: string;
   description?: string;
+  translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
+  datasetTranslations?: Record<string, Record<string, { title?: string; description?: string }>>;
   datasets: string[];
   defaultDataset?: string;
+  uiLanguages?: { code: string; label: string }[];
   branding?: {
     primaryColor?: string;
     darkColor?: string;
@@ -150,6 +154,26 @@ export function useSiteConfig() {
   const config = computed(() => siteConfig.value);
   const visibleDatasets = computed(() => siteConfig.value?.datasets ?? []);
 
+  const localizedTitle = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.title ?? siteConfig.value?.title ?? 'Glossarist';
+  });
+
+  const localizedSubtitle = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.subtitle ?? siteConfig.value?.subtitle;
+  });
+
+  const localizedDescription = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.description ?? siteConfig.value?.description;
+  });
+
+  function localizedDatasetField(datasetId: string, field: 'title' | 'description', fallback?: string): string {
+    const tr = siteConfig.value?.datasetTranslations?.[datasetId]?.[locale.value];
+    return tr?.[field] ?? fallback ?? '';
+  }
+
   const globalPages = computed<PageConfig[]>(() =>
     synthesizeGlobalPages(siteConfig.value?.features, siteConfig.value?.pages),
   );
@@ -158,5 +182,5 @@ export function useSiteConfig() {
     synthesizeDatasetPages(siteConfig.value?.features, siteConfig.value?.pages),
   );
 
-  return { config, visibleDatasets, loadConfig, globalPages, datasetPages };
+  return { config, visibleDatasets, localizedTitle, localizedSubtitle, localizedDescription, localizedDatasetField, loadConfig, globalPages, datasetPages };
 }

package/src/i18n/index.ts

@@ -0,0 +1,51 @@
+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 { locale };
+
+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,128 @@
+# 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.stats: 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
+search.fullPlaceholder: Search terms across all datasets...
+search.button: Search
+search.searching: Searching across datasets...
+search.failed: Search failed
+search.retry: Retry
+search.result: result
+search.results: results
+search.oneResultFor: '1 result for "{query}"'
+search.manyResultsFor: '{count} results for "{query}"'
+search.noResults: No concepts found matching your search
+search.tryDifferent: Try a different term or check the spelling.
+search.showingFirst: Showing first {max} of {total} results. Refine your search for more specific matches.
+search.idMatch: ID match
+
+# 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
+
+# Dataset view
+dataset.concepts: concepts
+dataset.languages: languages
+dataset.filterPlaceholder: "Filter concepts... (press /)"
+dataset.of: of
+dataset.in: in
+dataset.all: All
+dataset.prev: Prev
+dataset.next: Next
+dataset.noMatch: No concepts match your filter
+dataset.clearFilter: Clear filter
+dataset.noConcepts: This dataset has no concepts
+dataset.failedToLoad: Failed to load dataset
+dataset.retry: Retry
+dataset.backToHome: Back to home
+dataset.download: Download
+
+# Statistics view
+stats.title: Statistics
+stats.summary: "{count} concepts across {langCount} languages."
+stats.language: Language
+stats.terms: Terms
+stats.definitions: Definitions
+stats.failedToLoad: Failed to load statistics
+stats.retry: Retry
+
+# Graph
+graph.nodes: nodes
+graph.edges: edges
+graph.all: All
+graph.none: None
+graph.resetZoom: Reset zoom
+graph.reLayout: Re-layout
+graph.nodeLabels: Node labels
+graph.designation: Designation
+graph.identifier: Identifier
+graph.viewConcept: View concept
+graph.stubLabel: Stub (not loaded)
+graph.domainLabel: Domain (standard)
+graph.datasets: Datasets
+graph.enableDatasets: Enable datasets to see their graph.
+graph.browseToPopulate: Browse concepts with cross-references to populate the graph.
+graph.renderingWarning: "Rendering first {max} of {total} nodes."
+graph.loadedStatus: loaded
+graph.stubStatus: stub
+graph.collapseControls: Collapse controls
+graph.expandControls: Expand controls
+graph.loading: Loading graph data...

package/src/i18n/locales/fra.yml

@@ -0,0 +1,128 @@
+# 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.stats: 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
+search.fullPlaceholder: Rechercher des termes dans tous les jeux de données…
+search.button: Rechercher
+search.searching: Recherche dans les jeux de données...
+search.failed: Échec de la recherche
+search.retry: Réessayer
+search.result: résultat
+search.results: résultats
+search.oneResultFor: '1 résultat pour « {query} »'
+search.manyResultsFor: '{count} résultats pour « {query} »'
+search.noResults: Aucun concept trouvé correspondant à votre recherche
+search.tryDifferent: Essayez un autre terme ou vérifiez l'orthographe.
+search.showingFirst: Affichage des {max} premiers résultats sur {total}. Affinez votre recherche.
+search.idMatch: Correspondance d'identifiant
+
+# 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
+
+# Dataset view
+dataset.concepts: concepts
+dataset.languages: langues
+dataset.filterPlaceholder: "Filtrer les concepts… (appuyez sur /)"
+dataset.of: de
+dataset.in: en
+dataset.all: Tous
+dataset.prev: Préc.
+dataset.next: Suiv.
+dataset.noMatch: Aucun concept ne correspond au filtre
+dataset.clearFilter: Effacer le filtre
+dataset.noConcepts: Ce jeu de données n'a aucun concept
+dataset.failedToLoad: Échec du chargement du jeu de données
+dataset.retry: Réessayer
+dataset.backToHome: Retour à l'accueil
+dataset.download: Télécharger
+
+# Statistics view
+stats.title: Statistiques
+stats.summary: "{count} concepts dans {langCount} langues."
+stats.language: Langue
+stats.terms: Termes
+stats.definitions: Définitions
+stats.failedToLoad: Échec du chargement des statistiques
+stats.retry: Réessayer
+
+# Graph
+graph.nodes: nœuds
+graph.edges: arêtes
+graph.all: Tous
+graph.none: Aucun
+graph.resetZoom: Réinitialiser le zoom
+graph.reLayout: Réorganiser
+graph.nodeLabels: Étiquettes des nœuds
+graph.designation: Désignation
+graph.identifier: Identifiant
+graph.viewConcept: Voir le concept
+graph.stubLabel: Non chargé
+graph.domainLabel: Domaine (standard)
+graph.datasets: Jeux de données
+graph.enableDatasets: Activez les jeux de données pour voir leur graphe.
+graph.browseToPopulate: Parcourez les concepts avec des renvois croisés pour remplir le graphe.
+graph.renderingWarning: "Affichage des {max} premiers nœuds sur {total}."
+graph.loadedStatus: chargé
+graph.stubStatus: non chargé
+graph.collapseControls: Réduire les contrôles
+graph.expandControls: Développer les contrôles
+graph.loading: Chargement des données du graphe...

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/AboutView.vue

@@ -4,10 +4,12 @@ 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 { t } = useI18n();
 const { getColor } = useDsStyle();
 const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
 
@@ -18,7 +20,7 @@ const manifest = computed(() => store.manifests.get(resolvedId.value));
   <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>

package/src/views/ContributorsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 interface Contributor {
   name: string;
@@ -9,6 +10,9 @@ interface Contributor {
   email?: string;
 }
 
+const { config: siteConfig } = useSiteConfig();
+const { t } = useI18n();
+
 const { config } = useSiteConfig();
 const contributors = config.value?.contributors as Contributor[] | undefined;
 </script>
@@ -16,7 +20,7 @@ const contributors = config.value?.contributors as Contributor[] | undefined;
 <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">Contributors</span>
     </nav>