@glossarist/concept-browser 0.5.0 → 0.6.0

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/router/index.ts

@@ -55,6 +55,16 @@ export const routes: RouteRecordRaw[] = [
     name: 'ontology-taxonomy',
     component: () => import('../views/OntologySchemaView.vue'),
   },
+  {
+    path: '/ontology/shape/:shapeId',
+    name: 'ontology-shape',
+    component: () => import('../views/OntologySchemaView.vue'),
+  },
+  {
+    path: '/ontology/property/:propertyId',
+    name: 'ontology-property',
+    component: () => import('../views/OntologySchemaView.vue'),
+  },
   {
     path: '/news',
     name: 'news',

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/stores/vocabulary.ts

@@ -52,7 +52,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     loading.value = true;
     error.value = null;
     try {
-      const adapters = await factory.discoverDatasets('/datasets.json');
+      const adapters = await factory.discoverDatasets(`${import.meta.env.BASE_URL}datasets.json`);
       for (const adapter of adapters) {
         datasets.value.set(adapter.registerId, adapter);
         if (adapter.manifest) {

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/lang.ts

@@ -29,4 +29,17 @@ export function langLabel(code: string): string {
   return code.toUpperCase();
 }
 
+const FALLBACK_LANG_ORDER = ['eng', 'fra'];
+
+export function sortLanguages(languages: string[], order?: string[]): string[] {
+  const priority = order ?? FALLBACK_LANG_ORDER;
+  const index = new Map(priority.map((l, i) => [l, i]));
+  return [...languages].sort((a, b) => {
+    const ai = index.get(a) ?? priority.length;
+    const bi = index.get(b) ?? priority.length;
+    if (ai !== bi) return ai - bi;
+    return a.localeCompare(b);
+  });
+}
+
 export const DEFAULT_LANG = 'eng';

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

@@ -15,7 +15,7 @@ const manifest = computed(() => store.manifests.get(resolvedId.value));
 </script>
 
 <template>
-  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <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>

package/src/views/ContributorsView.vue

@@ -14,7 +14,7 @@ const contributors = config.value?.contributors as Contributor[] | undefined;
 </script>
 
 <template>
-  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <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>
       <span class="text-ink-200">/</span>

package/src/views/DatasetView.vue

@@ -4,6 +4,7 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 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';
 
 const props = defineProps<{ registerId: string }>();
@@ -38,6 +39,26 @@ const totalConceptCount = computed(() => adapter.value?.getConceptCount() ?? 0);
 const filter = ref('');
 const filterInput = ref<HTMLInputElement | null>(null);
 const allChunksLoaded = ref(false);
+const selectedLang = ref<string | null>(null);
+
+interface LangOption {
+  code: string;
+  name: string;
+  label: string;
+  termCount: number;
+}
+
+const languageOptions = computed<LangOption[]>(() => {
+  const m = manifest.value;
+  if (!m) return [];
+  const sorted = sortLanguages(m.languages, m.languageOrder);
+  return sorted.map(code => ({
+    code,
+    name: langName(code),
+    label: langLabel(code),
+    termCount: m.languageStats?.[code]?.terms ?? 0,
+  }));
+});
 
 function onGlobalKeydown(e: KeyboardEvent) {
   if (e.key === '/' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
@@ -65,6 +86,17 @@ watch(filter, async (q) => {
   }
 });
 
+// When language filter changes, reset page and load all chunks
+watch(selectedLang, async (lang) => {
+  page.value = 1;
+  if (lang && !allChunksLoaded.value && adapter.value) {
+    chunkLoading.value = true;
+    await adapter.value.ensureAllChunksLoaded();
+    allChunksLoaded.value = true;
+    chunkLoading.value = false;
+  }
+});
+
 // Dense array: only loaded (non-undefined) entries
 const loadedConcepts = computed(() => {
   const arr = adapter.value?.getConcepts();
@@ -74,8 +106,10 @@ const loadedConcepts = computed(() => {
 
 const filtered = computed(() => {
   const q = filter.value.trim().toLowerCase();
-  if (!q) return loadedConcepts.value;
+  const lang = selectedLang.value;
   return loadedConcepts.value.filter(c => {
+    if (lang && !(lang in (c.designations ?? {}))) return false;
+    if (!q) return true;
     return (c.eng || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
   });
 });
@@ -91,8 +125,8 @@ const pageLoaded = computed(() => {
 });
 
 const paged = computed(() => {
-  // When filtering, paginate over filtered dense results (all chunks loaded)
-  if (filter.value.trim()) {
+  // When filtering (text or language), paginate over filtered dense results (all chunks loaded)
+  if (filter.value.trim() || selectedLang.value) {
     const start = (page.value - 1) * perPage;
     return filtered.value.slice(start, start + perPage);
   }
@@ -104,7 +138,7 @@ const paged = computed(() => {
 });
 
 const totalPages = computed(() => {
-  if (filter.value.trim()) {
+  if (filter.value.trim() || selectedLang.value) {
     return Math.max(1, Math.ceil(filtered.value.length / perPage));
   }
   return Math.max(1, Math.ceil(totalConceptCount.value / perPage));
@@ -112,7 +146,7 @@ const totalPages = computed(() => {
 
 // Load chunks needed for current page
 watch(page, async () => {
-  if (!adapter.value || filter.value.trim()) return;
+  if (!adapter.value || filter.value.trim() || selectedLang.value) return;
   const start = (page.value - 1) * perPage;
   if (!adapter.value.isRangeLoaded(start, perPage)) {
     chunkLoading.value = true;
@@ -229,7 +263,10 @@ function goToPage(p: number) {
           </svg>
         </div>
         <span class="text-sm text-ink-400">
-          <template v-if="filter.trim()">
+          <template v-if="selectedLang">
+            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts in {{ langName(selectedLang) }}
+          </template>
+          <template v-else-if="filter.trim()">
             {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
           </template>
           <template v-else-if="totalPages > 1">
@@ -241,6 +278,39 @@ function goToPage(p: number) {
         </span>
       </div>
 
+      <!-- Language filter -->
+      <div v-if="languageOptions.length > 1" class="flex flex-wrap gap-1.5 mb-5">
+        <button
+          @click="selectedLang = null"
+          :class="[
+            selectedLang === null
+              ? 'bg-ink-800 text-white'
+              : 'bg-surface-raised text-ink-600 hover:bg-ink-50 border border-ink-100'
+          ]"
+          class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+        >
+          All {{ totalConceptCount.toLocaleString() }}
+        </button>
+        <button
+          v-for="lang in languageOptions"
+          :key="lang.code"
+          @click="selectedLang = selectedLang === lang.code ? null : lang.code"
+          :class="[
+            selectedLang === lang.code
+              ? 'bg-ink-800 text-white'
+              : 'bg-surface-raised text-ink-600 hover:bg-ink-50 border border-ink-100'
+          ]"
+          class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5"
+        >
+          <span
+            class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+            :class="selectedLang === lang.code ? 'bg-ink-700 text-ink-200' : 'bg-ink-50 text-ink-500'"
+          >{{ lang.label }}</span>
+          {{ lang.name }}
+          <span class="text-[10px] opacity-60">{{ lang.termCount }}</span>
+        </button>
+      </div>
+
       <!-- Chunk loading skeleton -->
       <div v-if="chunkLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
         <div v-for="i in 6" :key="i" class="skeleton h-20"></div>
@@ -253,6 +323,7 @@ function goToPage(p: number) {
           :key="entry.id"
           :entry="entry"
           :register-id="registerId"
+          :display-lang="selectedLang"
           class="animate-entrance"
           :style="{ animationDelay: `${Math.min(idx, 20) * 30}ms` }"
         />

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

@@ -23,7 +23,7 @@ const activeLoading = ref(false);
 
 onMounted(async () => {
   try {
-    const resp = await fetch('/news.json');
+    const resp = await fetch(`${import.meta.env.BASE_URL}news.json`);
     if (resp.ok) posts.value = await resp.json();
   } catch (e: any) {
     error.value = e.message;
@@ -78,7 +78,7 @@ function formatDate(dateStr: string) {
 </script>
 
 <template>
-  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <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>
       <span class="text-ink-200">/</span>