@glossarist/concept-browser 0.3.4 → 0.4.0

package/src/views/PageView.vue

@@ -8,29 +8,36 @@ interface PageData {
 }
 
 const route = useRoute();
-const slug = computed(() => {
-  if (route.params.slug) return route.params.slug as string;
+const registerId = computed(() => route.params.registerId as string | undefined);
+const pageName = computed(() => {
   if (route.params.page) return route.params.page as string;
-  if (route.name === 'about' || route.name === 'about-global') return 'about';
-  const path = route.path.replace(/^\//, '').replace(/\/$/, '');
-  const lastSegment = path.split('/').pop() || '';
-  return lastSegment;
+  if (route.params.slug) return route.params.slug as string;
+  return 'about';
 });
+
 const data = ref<PageData | null>(null);
 const loading = ref(true);
 const notFound = ref(false);
 
 onMounted(async () => {
-  try {
-    const resp = await fetch(`/pages/${slug.value}.json`);
-    if (resp.ok) {
-      data.value = await resp.json();
-    } else {
-      notFound.value = true;
-    }
-  } catch {
-    notFound.value = true;
+  const page = pageName.value;
+  const dsId = registerId.value;
+
+  const urls = dsId
+    ? [`/pages/${dsId}-${page}.json`, `/pages/${page}.json`]
+    : [`/pages/${page}.json`];
+
+  for (const url of urls) {
+    try {
+      const resp = await fetch(url);
+      if (resp.ok) {
+        data.value = await resp.json();
+        loading.value = false;
+        return;
+      }
+    } catch { /* try next */ }
   }
+  notFound.value = true;
   loading.value = false;
 });
 </script>
@@ -39,8 +46,12 @@ onMounted(async () => {
   <div class="max-w-3xl 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>
+      <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>
+      </template>
       <span class="text-ink-200">/</span>
-      <span class="text-ink-700">{{ data?.title || slug }}</span>
+      <span class="text-ink-700">{{ data?.title || pageName }}</span>
     </nav>
 
     <template v-if="loading">
@@ -55,7 +66,7 @@ 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 "{{ slug }}" does not exist.</p>
+        <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>
       </div>
     </template>

package/src/views/StatsView.vue

@@ -23,11 +23,28 @@ const stats = computed(() => {
   const m = manifest.value;
   if (!m) return { langs: [], total: 0 };
 
+  // Scan the index for actual language coverage
+  const adapter = store.datasets.get(resolvedId.value);
+  const conceptCounts: Record<string, number> = {};
+
+  if (adapter) {
+    const concepts = adapter.getConcepts();
+    for (const c of concepts) {
+      if (!c) continue;
+      for (const lang of Object.keys(c.designations)) {
+        conceptCounts[lang] = (conceptCounts[lang] || 0) + 1;
+      }
+    }
+  }
+
+  // Merge with manifest languageStats (for definition counts)
   const ls = m.languageStats || {};
-  const langs: LangStat[] = m.languages.map(lang => ({
+  const allLangs = new Set([...Object.keys(conceptCounts), ...m.languages]);
+
+  const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
-    terms: ls[lang]?.terms ?? 0,
-    definitions: ls[lang]?.definitions ?? 0,
+    terms: conceptCounts[lang] ?? ls[lang]?.terms ?? 0,
+    definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
 
   // Sort: eng first, then by term count descending
@@ -41,6 +58,13 @@ const stats = computed(() => {
 });
 
 const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+
+function coverageColor(ratio: number): string {
+  if (ratio >= 0.8) return 'bg-emerald-500';
+  if (ratio >= 0.5) return 'bg-blue-500';
+  if (ratio >= 0.25) return 'bg-amber-500';
+  return 'bg-red-400';
+}
 </script>
 
 <template>
@@ -80,11 +104,11 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
       <div class="card -mx-4 sm:mx-0 overflow-x-auto">
         <table class="w-full text-sm">
           <thead>
-            <tr class="border-b border-ink-100/60 bg-ink-50/50">
-              <th class="text-left px-5 py-3 text-ink-500 font-medium">Language</th>
-              <th class="text-right px-5 py-3 text-ink-500 font-medium">Terms</th>
-              <th class="text-right px-5 py-3 text-ink-500 font-medium">Definitions</th>
-              <th class="px-5 py-3 text-ink-500 font-medium w-40"></th>
+            <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="px-5 py-3 text-ink-600 font-medium w-40"></th>
             </tr>
           </thead>
           <tbody>
@@ -103,10 +127,8 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
                   <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
                     <div
                       class="h-full rounded-full transition-all duration-500"
-                      :style="{
-                        width: (s.terms / maxTerms * 100) + '%',
-                        backgroundColor: getColor(resolvedId),
-                      }"
+                      :class="coverageColor(s.terms / maxTerms)"
+                      :style="{ width: (s.terms / maxTerms * 100) + '%' }"
                     ></div>
                   </div>
                   <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>

package/vite.config.ts

@@ -6,6 +6,8 @@ import { fileURLToPath } from 'url'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const cwd = process.cwd()
 
+const isTest = process.env.VITEST !== undefined
+
 export default defineConfig({
   base: process.env.BASE_PATH || '/',
   root: __dirname,
@@ -18,6 +20,12 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
+      // Shim Node.js built-ins used by glossarist-js (not needed in browser, only for build)
+      ...(!isTest ? {
+        crypto: resolve(__dirname, 'src/shims/node-crypto.ts'),
+        fs: resolve(__dirname, 'src/shims/empty.ts'),
+        path: resolve(__dirname, 'src/shims/node-path.ts'),
+      } : {}),
     },
   },
   test: {