@glossarist/concept-browser 0.4.8 → 0.4.11

package/README.md

@@ -159,6 +159,29 @@ datasets:
 | `externalConceptUrlTemplate` | no | URL template for linking to the official source of each concept. `{conceptId}` is replaced with the concept ID. |
 | `languageOrder` | no | Array of ISO 639-2 language codes controlling the display order on concept pages. Without this, languages default to English-first then alphabetical. |
 
+### Site features
+
+The `features` section in `site-config.yml` toggles functionality and customizes branding:
+
+```yaml
+features:
+  news: true               # enable news posts (requires newsDir)
+  stats: true              # show statistics dashboard
+  graph: true              # enable concept graph visualization
+  about: true              # enable about page
+  search: true             # enable full-text search
+  poweredBy:               # customize the sidebar/footer credit link
+    message: "Powered by Acme Corp"
+    url: "https://example.com"
+```
+
+| Field | Default | Description |
+|-------|---------|-------------|
+| `poweredBy.message` | `Built with the Glossarist Concept Browser` | Link text shown in sidebar and footer |
+| `poweredBy.url` | `https://github.com/glossarist/concept-browser` | Link href |
+
+Omit the `poweredBy` block to use defaults. The `message` becomes the full text of a clickable link — there is no hardcoded prefix.
+
 ### Cross-reference mapping
 
 The top-level `crossReferences` section maps inline references to dataset IDs:

package/package.json

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

package/src/components/AppSidebar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useUiStore } from '../stores/ui';
 import { useRoute, useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
-import { useOntologyNav } from '../composables/use-ontology-nav';
+import { useOntologyNav, compactToSlug } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
 
 const store = useVocabularyStore();
@@ -18,20 +18,31 @@ const { globalPages, datasetPages, config: siteConfig } = useSiteConfig();
 const currentDataset = computed(() => route.params.registerId as string ?? '');
 
 const {
-  activeClassId,
-  activeTaxonomy,
   expandedClasses,
   taxonomyKeys,
   taxonomyLabels,
   treeRoots,
-  supportingClasses,
-  isOverview,
   toggleExpand,
   childClasses,
   hasChildren,
 } = useOntologyNav();
 
-const isOntologyRoute = computed(() => route.name === 'ontology');
+const isOntologyRoute = computed(() =>
+  route.name === 'ontology' || route.name === 'ontology-class' || route.name === 'ontology-taxonomy'
+);
+
+const activeClassId = computed(() => {
+  if (route.name !== 'ontology-class') return null;
+  const slug = route.params.classId as string;
+  return slug.replace(/-/g, ':');
+});
+
+const activeTaxonomy = computed(() => {
+  if (route.name !== 'ontology-taxonomy') return null;
+  return route.params.taxonomyKey as string;
+});
+
+const isOverview = computed(() => route.name === 'ontology');
 
 const datasetEntries = computed(() => {
   const entries: { id: string; title: string; loaded: boolean; conceptCount: number }[] = [];
@@ -75,19 +86,11 @@ function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
 }
 
 function selectClass(id: string) {
-  activeClassId.value = id;
-  activeTaxonomy.value = null;
-  scrollMainToTop();
+  router.push(`/ontology/class/${compactToSlug(id)}`);
 }
 
 function selectTaxonomy(key: string) {
-  activeTaxonomy.value = key;
-  scrollMainToTop();
-}
-
-function scrollMainToTop() {
-  const main = document.querySelector('main');
-  if (main) main.scrollTo({ top: 0, behavior: 'smooth' });
+  router.push(`/ontology/taxonomy/${key}`);
 }
 </script>
 
@@ -119,13 +122,13 @@ function scrollMainToTop() {
           <!-- Ontology class tree nested under Ontology nav item -->
           <div v-if="page.route === 'ontology' && isOntologyRoute" class="ml-4 mt-1 mb-2 space-y-0.5">
             <!-- Overview -->
-            <button @click="activeClassId = null; activeTaxonomy = null; scrollMainToTop()"
+            <router-link to="/ontology"
               class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
               :class="isOverview ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
             >
               <span class="w-3 text-ink-200">·</span>
               <span class="flex-1 text-left">Overview</span>
-            </button>
+            </router-link>
 
             <div class="text-[10px] uppercase tracking-wide text-ink-300 mt-2 mb-1 px-2">Classes</div>
             <template v-for="root in treeRoots" :key="root.compact">
@@ -163,19 +166,6 @@ function scrollMainToTop() {
               </div>
             </template>
 
-            <!-- Supporting classes -->
-            <div v-if="supportingClasses.length" class="mt-2 pt-2 border-t border-ink-100/40">
-              <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Supporting</div>
-              <button v-for="cls in supportingClasses" :key="cls.compact"
-                @click="selectClass(cls.compact)"
-                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-              >
-                <span class="w-3 text-ink-200">·</span>
-                <span class="flex-1 text-left">{{ cls.label }}</span>
-              </button>
-            </div>
-
             <!-- SKOS Taxonomies -->
             <div class="mt-2 pt-2 border-t border-ink-100/40">
               <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Taxonomies</div>

package/src/composables/use-ontology-nav.ts

@@ -2,14 +2,17 @@ import { ref, computed } from 'vue';
 import {
   getClass,
   getClassTree,
-  getAllClasses,
   type OwlClass,
 } from '../adapters/ontology-schema';
 
-const OVERVIEW_ID = '__overview__';
+export function slugToCompact(slug: string): string {
+  return slug.replace(/-/g, ':');
+}
+
+export function compactToSlug(compact: string): string {
+  return compact.replace(/:/g, '-');
+}
 
-const activeClassId = ref<string | null>(null);
-const activeTaxonomy = ref<string | null>(null);
 const expandedClasses = ref(new Set<string>(['gloss:Designation']));
 
 const taxonomyKeys = [
@@ -49,17 +52,6 @@ function hasChildren(cls: OwlClass): boolean {
 
 const treeRoots = getClassTree();
 
-const supportingClasses = computed(() =>
-  getAllClasses().filter(
-    c => c.children.length === 0
-      && !c.subClassOf?.startsWith('gloss:')
-      && c.compact !== 'gloss:Concept'
-      && c.compact !== 'gloss:ConceptCollection'
-  )
-);
-
-const isOverview = computed(() => activeClassId.value === null && activeTaxonomy.value === null);
-
 const allNavItems = computed(() => {
   const items: { id: string; label: string; depth: number }[] = [];
   function walk(classes: OwlClass[], depth: number) {
@@ -76,15 +68,11 @@ const allNavItems = computed(() => {
 
 export function useOntologyNav() {
   return {
-    activeClassId,
-    activeTaxonomy,
     expandedClasses,
     taxonomyKeys,
     taxonomyLabels,
     treeRoots,
-    supportingClasses,
     allNavItems,
-    isOverview,
     toggleExpand,
     childClasses,
     hasChildren,

package/src/router/index.ts

@@ -45,6 +45,16 @@ export const routes: RouteRecordRaw[] = [
     name: 'ontology',
     component: () => import('../views/OntologySchemaView.vue'),
   },
+  {
+    path: '/ontology/class/:classId',
+    name: 'ontology-class',
+    component: () => import('../views/OntologySchemaView.vue'),
+  },
+  {
+    path: '/ontology/taxonomy/:taxonomyKey',
+    name: 'ontology-taxonomy',
+    component: () => import('../views/OntologySchemaView.vue'),
+  },
   {
     path: '/news',
     name: 'news',

package/src/views/OntologySchemaView.vue

@@ -1,22 +1,34 @@
 <script setup lang="ts">
 import { computed, watch, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
 import { getClass, getAllPropertiesForClass, getAllClasses, getStats } from '../adapters/ontology-schema';
 import { ontology, type TaxonomyConcept } from '../adapters/ontology-registry';
-import { useOntologyNav } from '../composables/use-ontology-nav';
+import { useOntologyNav, slugToCompact, compactToSlug } from '../composables/use-ontology-nav';
 
+const route = useRoute();
 const stats = getStats();
 
 const {
-  activeClassId,
-  activeTaxonomy,
   taxonomyLabels,
   allNavItems,
-  isOverview,
   treeRoots,
   hasChildren,
   childClasses,
 } = useOntologyNav();
 
+const activeClassId = computed(() => {
+  if (route.name !== 'ontology-class') return null;
+  const slug = route.params.classId as string;
+  return slugToCompact(slug);
+});
+
+const activeTaxonomy = computed(() => {
+  if (route.name !== 'ontology-taxonomy') return null;
+  return route.params.taxonomyKey as string;
+});
+
+const isOverview = computed(() => route.name === 'ontology');
+
 const activeClass = computed(() => activeClassId.value ? getClass(activeClassId.value) : null);
 const activeProperties = computed(() => activeClassId.value ? getAllPropertiesForClass(activeClassId.value) : { object: [], datatype: [] });
 
@@ -28,7 +40,7 @@ function activeTaxonomyData() {
   return { scheme: ontology.getScheme(key), concepts: all, top };
 }
 
-watch([activeClassId, activeTaxonomy], () => {
+watch(() => route.fullPath, () => {
   nextTick(() => {
     const main = document.querySelector('main');
     if (main) main.scrollTo({ top: 0 });
@@ -60,32 +72,11 @@ const allClasses = getAllClasses();
         <code class="block text-xs text-ink-400 mt-2">https://www.glossarist.org/ontologies/glossarist</code>
       </div>
 
-      <!-- Sticky mobile chips (for small screens where sidebar is hidden) -->
-      <div class="lg:hidden sticky top-14 z-10 bg-surface -mx-4 px-4 py-2 border-b border-ink-100/60 mb-4">
-        <div class="flex gap-2 overflow-x-auto scrollbar-none">
-          <button v-for="item in allNavItems" :key="item.id"
-            @click="activeClassId = item.id; activeTaxonomy = null"
-            class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
-            :class="activeClassId === item.id && !activeTaxonomy
-              ? 'bg-ink-800 text-white'
-              : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
-          >
-            {{ item.label }}
-          </button>
-          <button @click="activeTaxonomy = activeTaxonomy ? null : 'conceptStatus'"
-            class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
-            :class="activeTaxonomy
-              ? 'bg-ink-800 text-white'
-              : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
-          >Taxonomies</button>
-        </div>
-      </div>
-
       <h2 class="text-lg font-semibold text-ink-800 mb-4">Class Overview</h2>
       <div class="grid gap-3 sm:grid-cols-2">
-        <div v-for="cls in allClasses" :key="cls.compact"
-          @click="activeClassId = cls.compact"
-          class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors">
+        <router-link v-for="cls in allClasses" :key="cls.compact"
+          :to="`/ontology/class/${compactToSlug(cls.compact)}`"
+          class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors block">
           <div class="flex items-center gap-2">
             <span class="text-sm font-medium text-ink-700">{{ cls.label }}</span>
             <code class="text-[10px] text-ink-400 bg-ink-50 px-1.5 py-0.5 rounded">{{ cls.compact }}</code>
@@ -94,16 +85,30 @@ const allClasses = getAllClasses();
           <div v-if="cls.subClassOf" class="text-[10px] text-ink-300 mt-1">
             subClassOf <code class="text-ink-400">{{ cls.subClassOf }}</code>
           </div>
-        </div>
+        </router-link>
+      </div>
+
+      <h2 class="text-lg font-semibold text-ink-800 mt-8 mb-4">Taxonomies</h2>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <router-link v-for="tk in ['conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus', 'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber']" :key="tk"
+          :to="`/ontology/taxonomy/${tk}`"
+          class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors block">
+          <span class="text-sm font-medium text-ink-700">{{ taxonomyLabels[tk] }}</span>
+        </router-link>
       </div>
     </template>
 
-    <!-- Class detail (no overview header) -->
+    <!-- Class detail -->
     <template v-if="!activeTaxonomy && activeClass">
-      <!-- Breadcrumb -->
       <nav class="flex items-center gap-1.5 text-sm text-ink-400 mb-4">
-        <button @click="activeClassId = null" class="hover:text-ink-700 transition-colors">Overview</button>
-        <span class="text-ink-200">/</span>
+        <router-link to="/ontology" class="hover:text-ink-700 transition-colors">Overview</router-link>
+        <template v-if="activeClass.ancestors.length">
+          <span class="text-ink-200">/</span>
+          <template v-for="(anc, i) in activeClass.ancestors" :key="anc">
+            <router-link :to="`/ontology/class/${compactToSlug(anc)}`" class="hover:text-ink-700 transition-colors">{{ getClass(anc)?.label || anc }}</router-link>
+            <span class="text-ink-200">/</span>
+          </template>
+        </template>
         <span class="text-ink-700">{{ activeClass.label }}</span>
       </nav>
 
@@ -112,16 +117,15 @@ const allClasses = getAllClasses();
         <code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
         <div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
           <span class="text-ink-400 text-xs">subClassOf</span>
-          <code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
+          <router-link :to="`/ontology/class/${compactToSlug(activeClass.subClassOf)}`" class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded hover:bg-blue-100 transition-colors">{{ activeClass.subClassOf }}</router-link>
           <template v-if="activeClass.ancestors.length > 1">
             <span class="text-ink-300 text-xs">→</span>
-            <code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
+            <span class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).map(a => getClass(a)?.label || a).join(' → ') }}</span>
           </template>
         </div>
         <p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
       </div>
 
-      <!-- Object Properties -->
       <div v-if="activeProperties.object.length" class="mb-6">
         <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
           Object Properties ({{ activeProperties.object.length }})
@@ -149,7 +153,6 @@ const allClasses = getAllClasses();
         </table>
       </div>
 
-      <!-- Datatype Properties -->
       <div v-if="activeProperties.datatype.length">
         <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
           Datatype Properties ({{ activeProperties.datatype.length }})
@@ -181,11 +184,10 @@ const allClasses = getAllClasses();
       </div>
     </template>
 
-    <!-- Taxonomy detail (no overview header) -->
+    <!-- Taxonomy detail -->
     <template v-if="activeTaxonomy && activeTaxonomyData()">
-      <!-- Breadcrumb -->
       <nav class="flex items-center gap-1.5 text-sm text-ink-400 mb-4">
-        <button @click="activeTaxonomy = null; activeClassId = null" class="hover:text-ink-700 transition-colors">Overview</button>
+        <router-link to="/ontology" class="hover:text-ink-700 transition-colors">Overview</router-link>
         <span class="text-ink-200">/</span>
         <span class="text-ink-700">{{ taxonomyLabels[activeTaxonomy] }}</span>
       </nav>