@glossarist/concept-browser 0.7.54 → 0.7.55

package/package.json

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

package/scripts/process-about-pages.mjs

@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+// About page compiler — processes markdown/AsciiDoc about pages for
+// datasets and groups into the public/pages/*.json format consumed
+// by PageView.vue.
+//
+// Source layout:
+//   .datasets/<id>/about/about.{lang}.adoc   → dataset about
+//   .datasets/<id>/about/about.{lang}.md     → dataset about
+//   site-content/groups/<id>/about/about.{lang}.adoc → group about
+//
+// Output:
+//   public/pages/dataset-<id>-about.{lang}.json
+//   public/pages/group-<id>-about.{lang}.json
+//
+// Output shape: { title: string, html: string }
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync } from 'node:fs';
+import { join, basename, extname } from 'node:path';
+import { cwd } from 'node:process';
+
+const ROOT = cwd();
+const PUBLIC_PAGES = join(ROOT, 'public', 'pages');
+const DATASETS_DIR = join(ROOT, '.datasets');
+const GROUPS_CONTENT_DIR = join(ROOT, 'site-content', 'groups');
+
+function renderMarkdown(text) {
+  // Minimal markdown → HTML. For production, use a real parser.
+  // This handles headings, paragraphs, bold, italic, links, lists.
+  const lines = text.split('\n');
+  const html = [];
+  let inList = false;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      continue;
+    }
+    if (/^#{1}\s/.test(trimmed)) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      html.push(`<h1>${inline(trimmed.replace(/^#\s/, ''))}</h1>`);
+    } else if (/^#{2}\s/.test(trimmed)) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      html.push(`<h2>${inline(trimmed.replace(/^##\s/, ''))}</h2>`);
+    } else if (/^#{3}\s/.test(trimmed)) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      html.push(`<h3>${inline(trimmed.replace(/^###\s/, ''))}</h3>`);
+    } else if (/^[-*]\s/.test(trimmed)) {
+      if (!inList) { html.push('<ul>'); inList = true; }
+      html.push(`<li>${inline(trimmed.replace(/^[-*]\s/, ''))}</li>`);
+    } else {
+      if (inList) { html.push('</ul>'); inList = false; }
+      html.push(`<p>${inline(trimmed)}</p>`);
+    }
+  }
+  if (inList) html.push('</ul>');
+  return html.join('\n');
+}
+
+function inline(text) {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
+    .replace(/`(.+?)`/g, '<code>$1</code>');
+}
+
+function processAboutDir(sourceDir, outputPrefix) {
+  if (!existsSync(sourceDir)) return 0;
+  let count = 0;
+
+  for (const file of readdirSync(sourceDir)) {
+    const fullPath = join(sourceDir, file);
+    if (!statSync(fullPath).isFile()) continue;
+
+    const ext = extname(file);
+    if (ext !== '.md' && ext !== '.adoc' && ext !== '.html') continue;
+
+    // Parse filename: about.{lang}.md or about.md
+    const base = basename(file, ext);
+    const langMatch = base.match(/^about\.(\w+)$/);
+    const lang = langMatch ? langMatch[1] : 'eng';
+    const outputName = lang === 'eng'
+      ? `${outputPrefix}.json`
+      : `${outputPrefix}.${lang}.json`;
+
+    const raw = readFileSync(fullPath, 'utf8');
+    let html;
+    let title;
+
+    if (ext === '.html') {
+      html = raw;
+      const titleMatch = raw.match(/<h1[^>]*>(.+?)<\/h1>/);
+      title = titleMatch ? titleMatch[1] : 'About';
+    } else if (ext === '.md') {
+      html = renderMarkdown(raw);
+      const titleMatch = raw.match(/^#\s+(.+)$/m);
+      title = titleMatch ? titleMatch[1] : 'About';
+    } else {
+      // AsciiDoc — treat as plain text for now (production: use asciidoctor.js)
+      html = `<p>${raw.split('\n').filter(l => l.trim() && !l.startsWith('=')).join('</p>\n<p>')}</p>`;
+      const titleMatch = raw.match(/^=\s+(.+)$/m);
+      title = titleMatch ? titleMatch[1] : 'About';
+    }
+
+    const output = { title, html };
+    mkdirSync(PUBLIC_PAGES, { recursive: true });
+    writeFileSync(join(PUBLIC_PAGES, outputName), JSON.stringify(output));
+    count++;
+    console.log(`  Compiled: ${file} → public/pages/${outputName}`);
+  }
+
+  return count;
+}
+
+function main() {
+  mkdirSync(PUBLIC_PAGES, { recursive: true });
+  let total = 0;
+
+  // Dataset about pages
+  if (existsSync(DATASETS_DIR)) {
+    for (const dsId of readdirSync(DATASETS_DIR)) {
+      const aboutDir = join(DATASETS_DIR, dsId, 'about');
+      if (existsSync(aboutDir) && statSync(aboutDir).isDirectory()) {
+        console.log(`Processing dataset: ${dsId}`);
+        total += processAboutDir(aboutDir, `dataset-${dsId}-about`);
+      }
+    }
+  }
+
+  // Group about pages
+  if (existsSync(GROUPS_CONTENT_DIR)) {
+    for (const groupId of readdirSync(GROUPS_CONTENT_DIR)) {
+      const aboutDir = join(GROUPS_CONTENT_DIR, groupId, 'about');
+      if (existsSync(aboutDir) && statSync(aboutDir).isDirectory()) {
+        console.log(`Processing group: ${groupId}`);
+        total += processAboutDir(aboutDir, `group-${groupId}-about`);
+      }
+    }
+  }
+
+  console.log(total > 0 ? `\nCompiled ${total} about page(s).` : '\nNo about pages found.');
+}
+
+main();

package/src/adapters/types.ts

@@ -64,7 +64,7 @@ export interface Manifest {
   lastUpdated: string;
   sourceRepo: string;
   chunkSize: number;
-  color?: string;
+  color?: string | { light: string; dark: string };
   shortname?: string;
   languageOrder?: string[];
   ref?: string;
@@ -109,7 +109,7 @@ export interface DatasetSummary {
   languages: string[];
   owner: string;
   tags: string[];
-  color?: string;
+  color?: string | { light: string; dark: string };
 }
 
 export interface DatasetRegistry {

package/src/components/AppSidebar.vue

@@ -12,7 +12,7 @@ import { toSectionTree } from '../utils/section-tree';
 import { formatSectionLabel, sectionName as sectionLocalized } from '../utils/section-display';
 
 const OntologySidebarSection = defineAsyncComponent(() => import('./OntologySidebarSection.vue'));
-import { resolveGroupKind } from '../config/group-types';
+import { resolveGroupKind, groupTypeMeta } from '../config/group-types';
 import type { DatasetGroupKind } from '../config/types';
 import { useDatasetSeries } from '../composables/useDatasetSeries';
 const useDatasetSeriesRef = () => useDatasetSeries().series;
@@ -271,14 +271,17 @@ const activeSectionId = computed(() => {
       <!-- Grouped datasets -->
       <template v-if="hasGroups">
         <div v-for="group in groupedDatasetEntries" :key="group.id" class="mb-2">
-          <!-- Group header (skip for ungrouped) -->
+          <!-- Group header (skip for ungrouped) — shows kind glyph + accent -->
           <button
             v-if="group.label"
             @click="toggleGroup(group.id)"
             class="sidebar-group-label w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50 dark:hover:bg-ink-700/60"
+            :title="groupTypeMeta(group).description"
           >
             <span class="w-3 text-[10px] mt-0.5 flex-shrink-0 text-ink-300 dark:text-ink-400">{{ isGroupExpanded(group.id) ? '▾' : '▸' }}</span>
+            <span class="flex-shrink-0 text-sm" :style="{ color: `var(--group-kind-${group.kind}-light, var(--group-kind-default-light, #6B6E7D))` }">{{ groupTypeMeta(group).glyph }}</span>
             <span class="flex-1 text-left leading-snug text-ink-700 dark:text-ink-200 font-serif">{{ group.label }}</span>
+            <span class="text-[9px] uppercase tracking-wide text-ink-300 dark:text-ink-500 font-sans">{{ groupTypeMeta(group).label }}</span>
           </button>
 
           <!-- Group entries -->

package/src/composables/use-color-theme.ts

@@ -59,7 +59,7 @@ export function useColorTheme(): void {
     const theme = createColorTheme(siteColors);
 
     for (const ds of store.datasetList) {
-      const declared = ds.manifest?.color as DatasetColorSpec | undefined;
+      const declared = ds.manifest?.color;
       const pair = theme.datasetColor(ds.id, declared);
       const scopeId = `ds-color-scope-${ds.id.replace(/[^a-zA-Z0-9]/g, '_')}`;
       let scope = document.getElementById(scopeId);

package/src/router/index.ts

@@ -31,6 +31,18 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/PageView.vue'),
     props: true,
   },
+  {
+    path: '/group/:groupId',
+    name: 'group',
+    component: () => import('../views/GroupView.vue'),
+    props: true,
+  },
+  {
+    path: '/group/:groupId/about',
+    name: 'group-about',
+    component: () => import('../views/PageView.vue'),
+    props: true,
+  },
   {
     path: '/search',
     name: 'search',

package/src/style.css

@@ -480,14 +480,6 @@
 .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
 .dark .text-red-600 { color: #fca5a5 !important; }
 
-/* ── Sidebar group labels (brand colors are too dark in dark mode) ── */
-.dark .sidebar-group-label {
-  filter: brightness(1.6);
-}
-.dark .sidebar-group-label:hover {
-  filter: brightness(1.4);
-}
-
 /* ── Gold accent that adapts to theme ── */
 :root {
   --gold-accent: #B8935A;

package/src/utils/dataset-style.ts

@@ -64,7 +64,7 @@ export function useDsStyle() {
 
     const store = useVocabularyStore();
     const ds = store.datasetList.find(d => d.id === registerId);
-    const declared = ds?.manifest?.color as DatasetColorSpec | undefined;
+    const declared = ds?.manifest?.color;
     const fallback = paletteColor(store.datasetList.findIndex(d => d.id === registerId));
     const style = makeDsStyle(declared, fallback);
     cache.set(registerId, style);

package/src/views/GroupView.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+/**
+ * GroupView — overview page for a dataset group (lineage series,
+ * topic bundle, family, collection). Renders authored about content
+ * when available, otherwise generates from group metadata + members.
+ *
+ * Route: /group/:groupId
+ */
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useSiteConfig } from '../config/use-site-config';
+import { resolveGroupKind, groupTypeMeta } from '../config/group-types';
+import { useVocabularyStore } from '../stores/vocabulary';
+
+const route = useRoute();
+const router = useRouter();
+const { datasetGroups } = useSiteConfig();
+const store = useVocabularyStore();
+
+const groupId = computed(() => route.params.groupId as string);
+
+const group = computed(() => {
+  return datasetGroups.value?.find(g => g.id === groupId.value);
+});
+
+const groupKind = computed(() => group.value ? resolveGroupKind(group.value) : 'default');
+const groupMeta = computed(() => group.value ? groupTypeMeta(group.value) : groupTypeMeta({}));
+
+const loading = ref(true);
+const aboutHtml = ref<string | null>(null);
+const aboutTitle = ref<string>('');
+
+async function fetchAbout() {
+  loading.value = true;
+  aboutHtml.value = null;
+
+  const base = import.meta.env.BASE_URL;
+  const candidates = [
+    `${base}pages/group-${groupId.value}-about.json`,
+  ];
+
+  for (const url of candidates) {
+    try {
+      const resp = await fetch(url);
+      if (resp.ok) {
+        const data = await resp.json();
+        aboutTitle.value = data.title || group.value?.label || groupId.value;
+        aboutHtml.value = data.html;
+        break;
+      }
+    } catch { /* try next */ }
+  }
+
+  loading.value = false;
+}
+
+onMounted(fetchAbout);
+watch(groupId, fetchAbout);
+
+const members = computed(() => {
+  if (!group.value) return [];
+  return group.value.datasets.map(id => {
+    const m = store.manifests.get(id);
+    return {
+      id,
+      title: m?.title ?? id,
+      ref: m?.ref ?? id,
+      conceptCount: m?.conceptCount ?? 0,
+      loaded: !!m,
+      status: m?.status ?? 'unknown',
+      year: m?.ref ? parseInt(m.ref.match(/(\d{4})$/)?.[1] ?? '0', 10) || undefined : undefined,
+    };
+  }).sort((a, b) => (a.year ?? 0) - (b.year ?? 0));
+});
+
+function openDataset(id: string) {
+  router.push({ name: 'dataset', params: { registerId: id } });
+}
+</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">Home</router-link>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">{{ group?.label ?? groupId }}</span>
+    </nav>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-4">
+        <div class="h-8 bg-ink-100 rounded w-64"></div>
+        <div class="card p-6"><div class="h-48 bg-ink-50 rounded"></div></div>
+      </div>
+    </template>
+
+    <template v-else-if="group">
+      <div class="flex items-baseline gap-3 mb-2">
+        <span class="text-2xl">{{ groupMeta.glyph }}</span>
+        <h1 class="font-serif text-3xl text-ink-800 dark:text-ink-50">
+          {{ group.label }}
+        </h1>
+      </div>
+      <p v-if="group.description" class="text-ink-500 dark:text-ink-400 mb-6">{{ group.description }}</p>
+
+      <div v-if="aboutHtml" class="card p-6 mb-6 prose-page" v-html="aboutHtml"></div>
+
+      <h2 class="section-label mb-3">Members ({{ members.length }})</h2>
+      <div class="space-y-2">
+        <button
+          v-for="m in members"
+          :key="m.id"
+          type="button"
+          class="w-full text-left card p-4 flex items-center gap-4 hover:border-ink-300 transition-colors"
+          @click="openDataset(m.id)"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="font-medium truncate">{{ m.title }}</div>
+            <div v-if="m.loaded" class="text-xs text-ink-400 mt-0.5">
+              {{ m.conceptCount.toLocaleString() }} concepts · {{ m.status }}
+            </div>
+          </div>
+          <span v-if="m.year" class="font-mono text-sm text-ink-400 flex-shrink-0">{{ m.year }}</span>
+        </button>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="card p-8 text-center">
+        <h1 class="font-serif text-2xl text-ink-800 mb-2">Group not found</h1>
+        <p class="text-ink-500 mb-4">No group with id "{{ groupId }}" is configured.</p>
+        <router-link :to="{ name: 'home' }" class="btn-primary">Go home</router-link>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/SidebarSeriesSection.vue

@@ -1,239 +0,0 @@
-<script setup lang="ts">
-/**
- * SidebarSeriesSection — compact version of the dataset series list for the
- * AppSidebar. Shows all multi-edition series as collapsible groups with their
- * editions as clickable items.
- *
- * Designed to fit the sidebar's existing visual language: small text, gold
- * accents, ink-100 borders. Uses Tailwind dark: classes for theme switching.
- */
-import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useDatasetSeries } from '../composables/useDatasetSeries';
-
-const router = useRouter();
-const { series } = useDatasetSeries();
-
-const multiEditionSeries = computed(() =>
-  series.value.filter(s => s.members.length > 1)
-);
-
-/* Collapse state — start expanded for the active series, collapsed otherwise */
-const collapsed = ref<Set<string>>(new Set());
-function toggle(key: string) {
-  const next = new Set(collapsed.value);
-  if (next.has(key)) next.delete(key);
-  else next.add(key);
-  collapsed.value = next;
-}
-function isCollapsed(key: string) {
-  return collapsed.value.has(key);
-}
-
-function navigate(registerId: string) {
-  router.push({ name: 'dataset', params: { registerId } });
-}
-</script>
-
-<template>
-  <div v-if="multiEditionSeries.length" class="sidebar-series">
-    <div class="section-label">Edition Series</div>
-    <div class="series-list">
-      <div v-for="s in multiEditionSeries" :key="s.key" class="series-block">
-        <button
-          class="series-header"
-          @click="toggle(s.key)"
-        >
-          <span class="series-chevron">{{ isCollapsed(s.key) ? '▸' : '▾' }}</span>
-          <span class="series-title">{{ s.title }}</span>
-          <span class="series-count">{{ s.members.length }}</span>
-        </button>
-        <ol v-if="!isCollapsed(s.key)" class="series-editions">
-          <li
-            v-for="member in [...s.members].reverse()"
-            :key="member.id"
-            :class="['edition-row', { active: member.isActive, current: member.isCurrent }]"
-          >
-            <button class="edition-button" @click="navigate(member.id)">
-              <span class="edition-year">{{ member.year ?? '—' }}</span>
-              <span class="edition-meta">
-                <span v-if="member.isActive" class="edition-mark">●</span>
-                <span v-else-if="member.isCurrent" class="edition-mark current">◆</span>
-              </span>
-            </button>
-          </li>
-        </ol>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.sidebar-series {
-  margin-bottom: 1.5rem;
-}
-.section-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: theme('colors.ink.300');
-  margin-bottom: 0.5rem;
-}
-:global(.dark) .section-label {
-  color: theme('colors.ink.400');
-}
-
-.series-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.series-block {
-  border-radius: 6px;
-}
-
-.series-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: left;
-  color: theme('colors.ink.700');
-  font-size: 12px;
-  font-weight: 600;
-  transition: background 0.15s;
-}
-.series-header:hover {
-  background: theme('colors.ink.50');
-}
-:global(.dark) .series-header {
-  color: theme('colors.ink.200');
-}
-:global(.dark) .series-header:hover {
-  background: theme('colors.ink.700');
-}
-.series-chevron {
-  font-size: 10px;
-  width: 0.625rem;
-  color: theme('colors.ink.300');
-}
-.series-title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: 'DM Serif Display', Georgia, serif;
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: -0.005em;
-}
-.series-count {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: theme('colors.ink.300');
-  background: theme('colors.ink.50');
-  padding: 1px 6px;
-  border-radius: 8px;
-  font-weight: 600;
-}
-:global(.dark) .series-count {
-  background: theme('colors.ink.700');
-  color: theme('colors.ink.300');
-}
-
-.series-editions {
-  list-style: none;
-  padding: 0 0 0 0.625rem;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.edition-row {
-  position: relative;
-}
-
-.edition-button {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  width: 100%;
-  padding: 0.25rem 0.5rem 0.25rem 0.875rem;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: left;
-  color: theme('colors.ink.500');
-  font-size: 11px;
-  transition: all 0.15s;
-  position: relative;
-}
-.edition-button::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: theme('colors.ink.200');
-}
-.edition-button:hover {
-  background: theme('colors.ink.50');
-  color: theme('colors.ink.800');
-}
-:global(.dark) .edition-button {
-  color: theme('colors.ink.400');
-}
-:global(.dark) .edition-button:hover {
-  background: theme('colors.ink.700');
-  color: theme('colors.ink.100');
-}
-
-.edition-row.active .edition-button {
-  color: #B8935A;
-  font-weight: 600;
-  background: rgba(184, 147, 90, 0.08);
-}
-.edition-row.active .edition-button::before {
-  background: #B8935A;
-  width: 5px;
-  height: 5px;
-  box-shadow: 0 0 0 2px rgba(184, 147, 90, 0.20);
-}
-.edition-row.current:not(.active) .edition-button::before {
-  background: #B8935A;
-}
-
-.edition-year {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-}
-.edition-meta {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-.edition-mark {
-  font-size: 7px;
-  color: theme('colors.ink.300');
-}
-.edition-mark.current {
-  color: #B8935A;
-  font-size: 9px;
-}
-</style>