@glossarist/concept-browser 0.2.1 → 0.2.2

package/package.json

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

package/scripts/generate-data.mjs

@@ -678,8 +678,103 @@ function processNewsPage(config, page) {
   console.log(`Generated news index: ${index.length} posts, ${postFiles.length} files copied to public/news/`);
 }
 
+// --- Markdown-lite renderer (isomorphic, same logic as src/utils/markdown-lite.ts) ---
+
+function renderMarkdown(input) {
+  const INLINE_PATTERNS = [
+    [/\*\*(.+?)\*\*/g, m => `<strong>${m[1]}</strong>`],
+    [/(?<!\*)\*([^*]+?)\*(?!\*)/g, m => `<em>${m[1]}</em>`],
+    [/`([^`]+?)`/g, m => `<code>${m[1]}</code>`],
+    [/\[([^\]]+)\]\(([^)]+)\)/g, m => `<a href="${m[2]}" target="_blank">${m[1]}</a>`],
+  ];
+  function renderInline(text) {
+    for (const [re, fn] of INLINE_PATTERNS) {
+      text = text.replace(re, (...args) => fn(args));
+    }
+    return text;
+  }
+  function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  const blocks = [];
+  const lines = input.split('\n');
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trimStart().startsWith('```')) {
+      const lang = line.trim().slice(3);
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith('```')) { codeLines.push(lines[i]); i++; }
+      i++;
+      blocks.push(`<pre><code${lang ? ` class="language-${lang}"` : ''}>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
+      continue;
+    }
+    const hm = line.match(/^(#{1,4})\s+(.+)/);
+    if (hm) { blocks.push(`<h${hm[1].length + 1}>${renderInline(hm[2])}</h${hm[1].length + 1}>`); i++; continue; }
+    if (/^---+\s*$/.test(line)) { blocks.push('<hr>'); i++; continue; }
+    if (/^\s*[-*]\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) { items.push(`<li>${renderInline(lines[i].replace(/^\s*[-*]\s+/, ''))}</li>`); i++; }
+      blocks.push(`<ul>${items.join('')}</ul>`); continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) { items.push(`<li>${renderInline(lines[i].replace(/^\s*\d+\.\s+/, ''))}</li>`); i++; }
+      blocks.push(`<ol>${items.join('')}</ol>`); continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const ql = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) { ql.push(lines[i].replace(/^>\s?/, '')); i++; }
+      blocks.push(`<blockquote>${renderInline(ql.join(' '))}</blockquote>`); continue;
+    }
+    if (!line.trim()) { i++; continue; }
+    const pl = [];
+    while (i < lines.length && lines[i].trim() && !/^#{1,4}\s/.test(lines[i]) && !/^\s*[-*]\s+/.test(lines[i]) && !/^\s*\d+\.\s+/.test(lines[i]) && !/^>\s?/.test(lines[i]) && !lines[i].trimStart().startsWith('```')) { pl.push(lines[i]); i++; }
+    if (pl.length) blocks.push(`<p>${renderInline(pl.join(' '))}</p>`);
+  }
+  return blocks.join('\n');
+}
+
+function processContentPage(config, page) {
+  if (!page.source) {
+    console.warn(`  Skipping content page '${page.route}': no source file`);
+    return;
+  }
+  const srcPath = path.resolve(ROOT, page.source);
+  if (!fs.existsSync(srcPath)) {
+    console.warn(`  Skipping content page '${page.route}': source not found (${srcPath})`);
+    return;
+  }
+  const raw = fs.readFileSync(srcPath, 'utf8');
+  const ext = path.extname(srcPath).toLowerCase();
+  let html;
+  if (ext === '.html' || ext === '.htm') {
+    html = raw;
+  } else {
+    const stripped = stripFrontmatter(raw);
+    html = renderMarkdown(stripped);
+  }
+
+  const pagesDir = path.join(PUBLIC, 'pages');
+  fs.mkdirSync(pagesDir, { recursive: true });
+  writeJson(path.join(pagesDir, `${page.route}.json`), { title: page.title, html });
+  console.log(`  Generated content page: ${page.route} (${ext})`);
+}
+
+function stripFrontmatter(text) {
+  const lines = text.split('\n');
+  if (lines[0] !== '---') return text;
+  let end = -1;
+  for (let i = 1; i < lines.length; i++) { if (lines[i] === '---') { end = i; break; } }
+  if (end < 0) return text;
+  return lines.slice(end + 1).join('\n').trim();
+}
+
 const pageProcessors = {
   news: processNewsPage,
+  page: processContentPage,
 };
 
 function synthesizePages(config) {

package/src/composables/use-dataset-loader.ts

@@ -1,13 +1,18 @@
-import { ref, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
+import { useSiteConfig } from '../config/use-site-config';
 
-export function useDatasetLoader(registerId: () => string) {
+export function useDatasetLoader(registerId: () => string | undefined) {
   const store = useVocabularyStore();
+  const { config } = useSiteConfig();
   const loading = ref(false);
   const localError = ref<string | null>(null);
 
+  const resolvedId = computed(() => registerId() || config.value?.defaultDataset || '');
+
   async function ensureLoaded() {
-    const id = registerId();
+    const id = resolvedId.value;
+    if (!id) return;
     const adapter = store.datasets.get(id);
     if (adapter?.index) return;
     loading.value = true;
@@ -21,7 +26,7 @@ export function useDatasetLoader(registerId: () => string) {
   }
 
   onMounted(ensureLoaded);
-  watch(registerId, ensureLoaded);
+  watch(resolvedId, ensureLoaded);
 
-  return { loading, localError, ensureLoaded };
+  return { loading, localError, ensureLoaded, resolvedId };
 }

package/src/config/types.ts

@@ -121,7 +121,7 @@ export const FORMAT_LABELS: Record<string, string> = {
 
 // === Pages ===
 
-export type PageType = 'news' | 'contributors' | 'about' | 'stats' | 'custom';
+export type PageType = 'page' | 'news' | 'contributors' | 'about' | 'stats' | 'custom';
 
 export interface PageConfig {
   type: PageType;

package/src/router/index.ts

@@ -50,11 +50,33 @@ const routes: RouteRecordRaw[] = [
     name: 'contributors',
     component: () => import('../views/ContributorsView.vue'),
   },
+  {
+    path: '/about',
+    name: 'about-global',
+    component: () => import('../views/AboutView.vue'),
+  },
+  {
+    path: '/stats',
+    name: 'stats-global',
+    component: () => import('../views/StatsView.vue'),
+  },
   {
     path: '/resolve/:uri(.*)',
     name: 'resolve',
     component: () => import('../views/ResolveView.vue'),
   },
+  // Catch-all for custom content pages (lowest priority)
+  {
+    path: '/dataset/:registerId/:page',
+    name: 'dataset-page',
+    component: () => import('../views/PageView.vue'),
+    props: true,
+  },
+  {
+    path: '/:slug',
+    name: 'page',
+    component: () => import('../views/PageView.vue'),
+  },
 ];
 
 const router = createRouter({

package/src/style.css

@@ -160,51 +160,73 @@
   }
 
   /* Prose content (news posts, etc.) */
+  .prose-page,
   .prose-news {
     @apply text-sm text-ink-700 leading-relaxed;
   }
+  .prose-page h2,
   .prose-news h2 {
     @apply font-serif text-xl text-ink-800 mt-6 mb-3;
   }
+  .prose-page h3,
   .prose-news h3 {
     @apply font-serif text-lg text-ink-800 mt-5 mb-2;
   }
+  .prose-page h4,
   .prose-news h4 {
     @apply font-semibold text-ink-800 mt-4 mb-2;
   }
+  .prose-page p,
   .prose-news p {
     @apply mb-4;
   }
+  .prose-page ul, .prose-page ol,
   .prose-news ul, .prose-news ol {
     @apply mb-4 pl-5;
   }
+  .prose-page ul,
   .prose-news ul {
     @apply list-disc;
   }
+  .prose-page ol,
   .prose-news ol {
     @apply list-decimal;
   }
+  .prose-page li,
   .prose-news li {
     @apply mb-1;
   }
+  .prose-page a,
   .prose-news a {
     @apply concept-link;
   }
+  .prose-page strong,
   .prose-news strong {
     @apply font-semibold text-ink-800;
   }
+  .prose-page em,
   .prose-news em {
     @apply italic;
   }
+  .prose-page code,
   .prose-news code {
     @apply bg-ink-50 text-ink-600 px-1 rounded text-xs font-mono;
   }
+  .prose-page pre,
   .prose-news pre {
     @apply bg-ink-50 rounded-lg p-4 mb-4 overflow-x-auto text-xs font-mono;
   }
+  .prose-page pre code,
   .prose-news pre code {
     @apply bg-transparent px-0 text-ink-700;
   }
+  .prose-page blockquote,
+  .prose-news blockquote {
+    @apply border-l-4 border-ink-200 pl-4 italic text-ink-500 mb-4;
+  }
+  .prose-page hr {
+    @apply border-ink-100 my-6;
+  }
 }
 
 @layer utilities {

package/src/utils/markdown-lite.ts

@@ -0,0 +1,109 @@
+const INLINE_PATTERNS: [RegExp, (m: RegExpMatchArray) => string][] = [
+  [/\*\*(.+?)\*\*/g, m => `<strong>${m[1]}</strong>`],
+  [/(?<!\*)\*([^*]+?)\*(?!\*)/g, m => `<em>${m[1]}</em>`],
+  [/`([^`]+?)`/g, m => `<code>${m[1]}</code>`],
+  [/\[([^\]]+)\]\(([^)]+)\)/g, m => `<a href="${m[2]}" target="_blank">${m[1]}</a>`],
+];
+
+function renderInline(text: string): string {
+  for (const [re, fn] of INLINE_PATTERNS) {
+    text = text.replace(re, (...args) => fn(args as any));
+  }
+  return text;
+}
+
+export function renderMarkdown(input: string): string {
+  const blocks: string[] = [];
+  const lines = input.split('\n');
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Code fence
+    if (line.trimStart().startsWith('```')) {
+      const lang = line.trim().slice(3);
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing fence
+      blocks.push(`<pre><code${lang ? ` class="language-${lang}"` : ''}>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
+      continue;
+    }
+
+    // Heading
+    const headingMatch = line.match(/^(#{1,4})\s+(.+)/);
+    if (headingMatch) {
+      const level = headingMatch[1].length + 1; // h2-h5 (h1 reserved for page title)
+      blocks.push(`<h${level}>${renderInline(headingMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^---+\s*$/.test(line)) {
+      blocks.push('<hr>');
+      i++;
+      continue;
+    }
+
+    // Unordered list
+    if (/^\s*[-*]\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
+        items.push(`<li>${renderInline(lines[i].replace(/^\s*[-*]\s+/, ''))}</li>`);
+        i++;
+      }
+      blocks.push(`<ul>${items.join('')}</ul>`);
+      continue;
+    }
+
+    // Ordered list
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+        items.push(`<li>${renderInline(lines[i].replace(/^\s*\d+\.\s+/, ''))}</li>`);
+        i++;
+      }
+      blocks.push(`<ol>${items.join('')}</ol>`);
+      continue;
+    }
+
+    // Blockquote
+    if (/^>\s?/.test(line)) {
+      const quoteLines: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) {
+        quoteLines.push(lines[i].replace(/^>\s?/, ''));
+        i++;
+      }
+      blocks.push(`<blockquote>${renderInline(quoteLines.join(' '))}</blockquote>`);
+      continue;
+    }
+
+    // Blank line
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+
+    // Paragraph
+    const paraLines: string[] = [];
+    while (i < lines.length && lines[i].trim() && !/^#{1,4}\s/.test(lines[i]) && !/^\s*[-*]\s+/.test(lines[i]) && !/^\s*\d+\.\s+/.test(lines[i]) && !/^>\s?/.test(lines[i]) && !line.trimStart().startsWith('```')) {
+      paraLines.push(lines[i]);
+      i++;
+      if (i >= lines.length) break;
+    }
+    if (paraLines.length) {
+      blocks.push(`<p>${renderInline(paraLines.join(' '))}</p>`);
+    }
+  }
+
+  return blocks.join('\n');
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}

package/src/views/AboutView.vue

@@ -5,13 +5,13 @@ import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { langName, langLabel } from '../utils/lang';
 
-const props = defineProps<{ registerId: string }>();
+const props = defineProps<{ registerId?: string }>();
 
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
-const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
 
-const manifest = computed(() => store.manifests.get(props.registerId));
+const manifest = computed(() => store.manifests.get(resolvedId.value));
 </script>
 
 <template>
@@ -20,7 +20,7 @@ const manifest = computed(() => store.manifests.get(props.registerId));
     <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>
-      <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || registerId }}</router-link>
+      <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">About</span>
     </nav>
@@ -109,8 +109,8 @@ const manifest = computed(() => store.manifests.get(props.registerId));
             :key="tag"
             class="badge"
             :style="{
-              backgroundColor: getColor(registerId) + '15',
-              color: getColor(registerId),
+              backgroundColor: getColor(resolvedId) + '15',
+              color: getColor(resolvedId),
             }"
           >
             {{ tag }}

package/src/views/PageView.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+interface PageData {
+  title: string;
+  html: string;
+}
+
+const route = useRoute();
+const slug = computed(() => (route.params.slug || route.params.page || '') as string);
+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;
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <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>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">{{ data?.title || slug }}</span>
+    </nav>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-6">
+        <div class="h-8 bg-ink-100 rounded w-48"></div>
+        <div class="h-4 bg-ink-100 rounded w-full"></div>
+        <div class="h-4 bg-ink-100 rounded w-5/6"></div>
+        <div class="h-4 bg-ink-100 rounded w-4/6"></div>
+      </div>
+    </template>
+
+    <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>
+        <router-link :to="{ name: 'home' }" class="btn-primary">Go Home</router-link>
+      </div>
+    </template>
+
+    <template v-else-if="data">
+      <h1 class="font-serif text-3xl text-ink-800 mb-6">{{ data.title }}</h1>
+      <div class="prose-page" v-html="data.html"></div>
+    </template>
+  </div>
+</template>

package/src/views/StatsView.vue

@@ -5,13 +5,13 @@ import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { langName, langLabel } from '../utils/lang';
 
-const props = defineProps<{ registerId: string }>();
+const props = defineProps<{ registerId?: string }>();
 
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
-const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
 
-const manifest = computed(() => store.manifests.get(props.registerId));
+const manifest = computed(() => store.manifests.get(resolvedId.value));
 
 interface LangStat {
   lang: string;
@@ -49,7 +49,7 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
     <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>
-      <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || registerId }}</router-link>
+      <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>
     </nav>
@@ -105,7 +105,7 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
                       class="h-full rounded-full transition-all duration-500"
                       :style="{
                         width: (s.terms / maxTerms * 100) + '%',
-                        backgroundColor: getColor(registerId),
+                        backgroundColor: getColor(resolvedId),
                       }"
                     ></div>
                   </div>