@glossarist/concept-browser 0.1.0

package/src/utils/asciidoc-lite.ts

@@ -0,0 +1,123 @@
+/**
+ * Lightweight AsciiDoc-to-HTML converter for news posts.
+ * Handles: paragraphs, headings, bold, italic, monospace, links, lists, source blocks.
+ */
+export function renderAsciiDocLite(text: string): string {
+  if (!text) return '';
+
+  const output: string[] = [];
+  const lines = text.split('\n');
+  let i = 0;
+  let inSourceBlock = false;
+  let sourceLines: string[] = [];
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Source block delimiter
+    if (trimmed.match(/^-{4,}\s*$/) || trimmed.match(/^\.{4,}\s*$/)) {
+      if (inSourceBlock) {
+        output.push(`<pre><code>${sourceLines.map(escapeHtml).join('\n')}</code></pre>`);
+        sourceLines = [];
+        inSourceBlock = false;
+      } else {
+        flushParagraph(output);
+        inSourceBlock = true;
+      }
+      i++;
+      continue;
+    }
+
+    if (inSourceBlock) {
+      sourceLines.push(line);
+      i++;
+      continue;
+    }
+
+    // Empty line — paragraph break
+    if (!trimmed) {
+      flushParagraph(output);
+      i++;
+      continue;
+    }
+
+    // Headings
+    const headingMatch = trimmed.match(/^(={1,5})\s+(.+)$/);
+    if (headingMatch) {
+      flushParagraph(output);
+      const level = headingMatch[1].length + 1;
+      output.push(`<h${level}>${inlineFormat(headingMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // Unordered list item
+    if (trimmed.match(/^\*\s+/)) {
+      flushParagraph(output);
+      const items: string[] = [];
+      while (i < lines.length && lines[i].trim().match(/^\*\s+/)) {
+        items.push(`<li>${inlineFormat(lines[i].trim().replace(/^\*\s+/, ''))}</li>`);
+        i++;
+      }
+      output.push(`<ul>${items.join('')}</ul>`);
+      continue;
+    }
+
+    // Ordered list item
+    if (trimmed.match(/^\.\s+/)) {
+      flushParagraph(output);
+      const items: string[] = [];
+      while (i < lines.length && lines[i].trim().match(/^\.\s+/)) {
+        items.push(`<li>${inlineFormat(lines[i].trim().replace(/^\.\s+/, ''))}</li>`);
+        i++;
+      }
+      output.push(`<ol>${items.join('')}</ol>`);
+      continue;
+    }
+
+    // Regular text — accumulate into paragraph buffer
+    paragraphBuf.push(inlineFormat(trimmed));
+    i++;
+  }
+
+  flushParagraph(output);
+
+  return output.join('\n');
+}
+
+let paragraphBuf: string[] = [];
+
+function flushParagraph(output: string[]) {
+  if (paragraphBuf.length > 0) {
+    output.push(`<p>${paragraphBuf.join(' ')}</p>`);
+    paragraphBuf = [];
+  }
+}
+
+function inlineFormat(text: string): string {
+  // AsciiDoc link: https://example.com[text]
+  text = text.replace(/(https?:\/\/[^\s\[]+)\[([^\]]*)\]/g, (_, url, label) =>
+    `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(label || url)}</a>`
+  );
+
+  // Bare URLs
+  text = text.replace(/(?<!href="|">)(https?:\/\/[^\s<]+)/g, url =>
+    `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(url)}</a>`
+  );
+
+  // Monospace: `text`
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Bold: *text*
+  text = text.replace(/\*([^*]+)\*/g, '<strong>$1</strong>');
+
+  // Italic: _text_
+  text = text.replace(/_([^_]+)_/g, '<em>$1</em>');
+
+  return text;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/src/utils/concept-formats.ts

@@ -0,0 +1,157 @@
+/**
+ * Format registry and converters for per-concept format downloads.
+ *
+ * Open/closed: add a new format by adding an entry to FORMAT_REGISTRY
+ * and a converter function. No changes to components needed.
+ */
+
+export interface FormatDescriptor {
+  extension: string;
+  label: string;
+  mediaType: string;
+}
+
+export const FORMAT_REGISTRY: Record<string, FormatDescriptor> = {
+  ttl: { extension: 'ttl', label: 'Turtle RDF', mediaType: 'text/turtle' },
+  jsonld: { extension: 'jsonld', label: 'JSON-LD (SKOS)', mediaType: 'application/ld+json' },
+  yaml: { extension: 'yaml', label: 'YAML', mediaType: 'text/yaml' },
+  tbx: { extension: 'tbx', label: 'TBX', mediaType: 'application/xml' },
+};
+
+export type ConceptDesignation = {
+  '@type'?: string;
+  'gl:normativeStatus'?: string;
+  'gl:term'?: string;
+};
+
+export type ConceptDefinition = {
+  'gl:content'?: string;
+};
+
+export type ConceptLocalized = {
+  'gl:languageCode'?: string;
+  'gl:designation'?: ConceptDesignation[];
+  'gl:definition'?: ConceptDefinition[];
+  'gl:notes'?: ConceptDefinition[];
+  'gl:source'?: any[];
+};
+
+export type ConceptDocument = {
+  '@id'?: string;
+  'gl:identifier'?: string;
+  'gl:localizedConcept'?: Record<string, ConceptLocalized>;
+};
+
+function getLocalizedData(concept: ConceptDocument) {
+  const result: Record<string, {
+    prefLabels: string[];
+    altLabels: string[];
+    definitions: string[];
+    notes: string[];
+  }> = {};
+
+  for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
+    const descs = lc['gl:designation'] || [];
+    const prefLabels = descs
+      .filter(d => d['gl:normativeStatus'] === 'preferred' && d['gl:term'])
+      .map(d => d['gl:term']!);
+    const altLabels = descs
+      .filter(d => d['gl:normativeStatus'] !== 'preferred' && d['gl:term'])
+      .map(d => d['gl:term']!);
+    const definitions = (lc['gl:definition'] || [])
+      .map(d => d['gl:content'] || '')
+      .filter(Boolean);
+    const notes = (lc['gl:notes'] || [])
+      .map(d => d['gl:content'] || '')
+      .filter(Boolean);
+
+    if (prefLabels.length || definitions.length) {
+      result[lang] = { prefLabels, altLabels, definitions, notes };
+    }
+  }
+
+  return result;
+}
+
+function escapeTurtle(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
+}
+
+/**
+ * Convert a concept document to SKOS Turtle.
+ */
+export function conceptToTurtle(concept: ConceptDocument): string {
+  const uri = concept['@id'] || '';
+  const id = concept['gl:identifier'] || '';
+  const data = getLocalizedData(concept);
+
+  const lines: string[] = [
+    '@prefix skos: <http://www.w3.org/2004/02/skos/core#> .',
+    '@prefix dcterms: <http://purl.org/dc/terms/> .',
+    '@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .',
+    '',
+  ];
+
+  const props: string[] = ['a skos:Concept'];
+  props.push(`  skos:notation "${escapeTurtle(id)}"`);
+
+  for (const [lang, d] of Object.entries(data)) {
+    for (const label of d.prefLabels) {
+      props.push(`  skos:prefLabel "${escapeTurtle(label)}"@${lang}`);
+    }
+    for (const label of d.altLabels) {
+      props.push(`  skos:altLabel "${escapeTurtle(label)}"@${lang}`);
+    }
+    for (const def of d.definitions) {
+      props.push(`  skos:definition "${escapeTurtle(def)}"@${lang}`);
+    }
+    for (const note of d.notes) {
+      props.push(`  skos:scopeNote "${escapeTurtle(note)}"@${lang}`);
+    }
+  }
+
+  lines.push(`<${uri}>`);
+  lines.push(props.join(' ;\n'));
+  lines.push(' .');
+
+  return lines.join('\n');
+}
+
+/**
+ * Convert a concept document to SKOS JSON-LD.
+ */
+export function conceptToSkosJsonLd(concept: ConceptDocument): string {
+  const uri = concept['@id'] || '';
+  const id = concept['gl:identifier'] || '';
+  const data = getLocalizedData(concept);
+
+  const doc: Record<string, any> = {
+    '@context': {
+      skos: 'http://www.w3.org/2004/02/skos/core#',
+      dcterms: 'http://purl.org/dc/terms/',
+      '@language': { '@container': '@language' },
+    },
+    '@id': uri,
+    '@type': 'skos:Concept',
+    'skos:notation': id,
+  };
+
+  const prefLabels: Record<string, string> = {};
+  const altLabels: Record<string, string> = {};
+  const definitions: Record<string, string> = {};
+  const scopeNotes: Record<string, string> = {};
+
+  for (const [lang, d] of Object.entries(data)) {
+    if (d.prefLabels[0]) prefLabels[lang] = d.prefLabels[0];
+    if (d.altLabels[0]) altLabels[lang] = d.altLabels[0];
+    if (d.definitions[0]) definitions[lang] = d.definitions[0];
+    if (d.notes[0]) scopeNotes[lang] = d.notes[0];
+  }
+
+  if (Object.keys(prefLabels).length) doc['skos:prefLabel'] = prefLabels;
+  if (Object.keys(altLabels).length) doc['skos:altLabel'] = altLabels;
+  if (Object.keys(definitions).length) doc['skos:definition'] = definitions;
+  if (Object.keys(scopeNotes).length) doc['skos:scopeNote'] = scopeNotes;
+
+  return JSON.stringify(doc, null, 2);
+}

package/src/utils/dataset-style.ts

@@ -0,0 +1,54 @@
+import { useVocabularyStore } from '../stores/vocabulary';
+
+const PALETTE = [
+  '#3366ff', '#0d9488', '#d97706', '#8b5cf6',
+  '#ec4899', '#059669', '#dc2626', '#6366f1',
+  '#0891b2', '#65a30d', '#be185d', '#7c3aed',
+];
+
+export interface DsStyle {
+  color: string;
+  light: string;
+  dark: string;
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function makeDsStyle(color: string): DsStyle {
+  return {
+    color,
+    light: hexToRgba(color, 0.1),
+    dark: hexToRgba(color, 0.85),
+  };
+}
+
+export function paletteColor(index: number): string {
+  return PALETTE[index % PALETTE.length];
+}
+
+export function useDsStyle() {
+  const cache = new Map<string, DsStyle>();
+
+  function getStyle(registerId: string): DsStyle {
+    const cached = cache.get(registerId);
+    if (cached) return cached;
+
+    const store = useVocabularyStore();
+    const ds = store.datasetList.find(d => d.id === registerId);
+    const color = ds?.manifest.color || paletteColor(store.datasetList.findIndex(d => d.id === registerId));
+    const style = makeDsStyle(color);
+    cache.set(registerId, style);
+    return style;
+  }
+
+  function getColor(registerId: string): string {
+    return getStyle(registerId).color;
+  }
+
+  return { getStyle, getColor, paletteColor, makeDsStyle };
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { langName, langLabel, DEFAULT_LANG } from './lang';

package/src/utils/lang.ts

@@ -0,0 +1,32 @@
+const LANG_NAMES: Record<string, string> = {
+  eng: 'English',
+  ara: 'Arabic',
+  deu: 'German',
+  fra: 'French',
+  spa: 'Spanish',
+  ita: 'Italian',
+  jpn: 'Japanese',
+  kor: 'Korean',
+  pol: 'Polish',
+  por: 'Portuguese',
+  srp: 'Serbian',
+  swe: 'Swedish',
+  zho: 'Chinese',
+  rus: 'Russian',
+  fin: 'Finnish',
+  dan: 'Danish',
+  nld: 'Dutch',
+  msa: 'Malay',
+  nob: 'Norwegian Bokmål',
+  nno: 'Norwegian Nynorsk',
+};
+
+export function langName(code: string): string {
+  return LANG_NAMES[code] ?? code;
+}
+
+export function langLabel(code: string): string {
+  return code.toUpperCase();
+}
+
+export const DEFAULT_LANG = 'eng';

package/src/utils/math.ts

@@ -0,0 +1,100 @@
+import katex from 'katex';
+
+export type XrefResolver = (uri: string, term: string) => string;
+
+/**
+ * Convert `* item` lines into <ul><li> blocks.
+ */
+function convertLists(text: string): string {
+  return text.replace(/(?:^|\n\n)((?:[ \t]*\* [^\n]+)(?:\n\n[ \t]*\* [^\n]+)*)/g, (_, block) => {
+    if (/^\*stem:\[/.test(block.trimStart())) return _;
+    const items: string[] = [];
+    const re = /[ \t]*\* ([^\n]+)/g;
+    let m;
+    while ((m = re.exec(block)) !== null) {
+      items.push(m[1].trim());
+    }
+    if (!items.length) return _;
+    const lis = items.map(item => `<li>${item}</li>`).join('');
+    return `<ul class="concept-list">${lis}</ul>`;
+  });
+}
+
+/**
+ * Render stem:[...] math notation to KaTeX HTML.
+ * Also handles cross-reference inline patterns (URN refs).
+ */
+export function renderMath(text: string, xrefResolver?: XrefResolver): string {
+  if (!text) return '';
+  let result = text;
+
+  result = result.replace(/\*stem:\[([^\]]*)\]\*/g, (_, math) => {
+    return renderKatexSpan(math, true);
+  });
+
+  result = result.replace(/stem:\[([^\]]*)\]/g, (_, math) => {
+    return renderKatexSpan(math, false);
+  });
+
+  result = convertLists(result);
+
+  result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  result = result.replace(/~([^~]+)~/g, '<sub>$1</sub>');
+
+  // Handle URN inline refs: {{urn:...,term}} (double-braced)
+  result = result.replace(/\{\{(urn:[^,}]+),([^}]+)\}\}/g, (_, uri, term) => {
+    if (xrefResolver) {
+      return xrefResolver(uri, term.trim());
+    }
+    return term.trim();
+  });
+
+  // Handle URN inline refs: {urn:...,term} (single-braced)
+  result = result.replace(/\{(urn:[^,}]+),([^}]+)\}/g, (_, uri, term) => {
+    if (xrefResolver) {
+      return xrefResolver(uri, term.trim());
+    }
+    return term.trim();
+  });
+
+  // Handle any remaining {{...}} refs (fallback: show term before comma)
+  result = result.replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
+
+  return result;
+}
+
+function renderKatexSpan(math: string, bold: boolean): string {
+  try {
+    const html = katex.renderToString(math, {
+      throwOnError: false,
+      displayMode: false,
+      output: 'html',
+    });
+    return `<span class="math-inline${bold ? ' math-bold' : ''}">${html}</span>`;
+  } catch {
+    return `<code class="math-fallback">${escapeHtml(math)}</code>`;
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+/**
+ * Clean content for plain text display (no math rendering).
+ */
+export function cleanContent(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/\*stem:\[([^\]]*)\]\*/g, '$1')
+    .replace(/stem:\[([^\]]*)\]/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/~([^~]+)~/g, '_$1')
+    .replace(/\n[ \t]*\* /g, '; ')
+    .replace(/\{\{urn:[^,}]+,([^}]+)\}\}/g, '$1')
+    .replace(/\{urn:[^,}]+,([^}]+)\}/g, '$1')
+    .replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
+}

package/src/views/AboutView.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+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 store = useVocabularyStore();
+const { getColor } = useDsStyle();
+const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+
+const manifest = computed(() => store.manifests.get(props.registerId));
+</script>
+
+<template>
+  <div class="max-w-3xl 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>
+      <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>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">About</span>
+    </nav>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-6">
+        <div class="h-8 bg-ink-100 rounded w-32"></div>
+        <div class="card p-6"><div class="h-24 bg-ink-50 rounded"></div></div>
+        <div class="card p-6"><div class="h-48 bg-ink-50 rounded"></div></div>
+        <div class="card p-6"><div class="h-16 bg-ink-50 rounded"></div></div>
+      </div>
+    </template>
+    <template v-else-if="localError">
+      <div class="card p-8 border-red-200 bg-red-50/50 text-center">
+        <p class="text-red-700 font-medium mb-1">Failed to load dataset info</p>
+        <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
+        <button @click="ensureLoaded" class="btn-primary">Retry</button>
+      </div>
+    </template>
+    <template v-else-if="manifest">
+      <h1 class="font-serif text-3xl text-ink-800 mb-6">About</h1>
+
+      <!-- Description -->
+      <div class="card p-6 mb-6">
+        <h2 class="section-label">Description</h2>
+        <p class="text-ink-700 leading-relaxed mt-3">{{ manifest.description }}</p>
+      </div>
+
+      <!-- Key info -->
+      <div class="card p-6 mb-6">
+        <h2 class="section-label">Key Information</h2>
+        <dl class="space-y-4 mt-3">
+          <div class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Owner</dt>
+            <dd class="text-ink-800 font-medium">{{ manifest.owner }}</dd>
+          </div>
+          <div class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Concepts</dt>
+            <dd class="text-ink-800 font-mono">{{ manifest.conceptCount.toLocaleString() }}</dd>
+          </div>
+          <div class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Languages</dt>
+            <dd class="text-ink-800">{{ manifest.languages.length }}</dd>
+          </div>
+          <div class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Last Updated</dt>
+            <dd class="text-ink-800">{{ manifest.lastUpdated }}</dd>
+          </div>
+          <div class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Schema Version</dt>
+            <dd class="text-ink-800 font-mono text-sm">{{ manifest.schemaVersion }}</dd>
+          </div>
+          <div v-if="manifest.sourceRepo" class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-32 flex-shrink-0 pt-0.5">Source</dt>
+            <dd>
+              <a :href="manifest.sourceRepo" target="_blank" class="concept-link text-sm break-all">
+                {{ manifest.sourceRepo.replace('https://github.com/', '') }}
+              </a>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Languages -->
+      <div class="card p-6 mb-6">
+        <h2 class="section-label">Languages</h2>
+        <div class="flex flex-wrap gap-2 mt-3">
+          <div
+            v-for="lang in manifest.languages"
+            :key="lang"
+            class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-ink-50"
+          >
+            <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(lang) }}</span>
+            <span class="text-sm font-medium text-ink-700">{{ langName(lang) }}</span>
+            <span class="text-xs text-ink-300">({{ lang }})</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tags -->
+      <div v-if="manifest.tags?.length" class="card p-6">
+        <h2 class="section-label">Tags</h2>
+        <div class="flex flex-wrap gap-2 mt-3">
+          <span
+            v-for="tag in manifest.tags"
+            :key="tag"
+            class="badge"
+            :style="{
+              backgroundColor: getColor(registerId) + '15',
+              color: getColor(registerId),
+            }"
+          >
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>