fix: SPA navigation, pagination, ARIA, dark mode, remove orphans

.vitepress/config.ts

@@ -86,7 +86,7 @@ export default defineConfig({
     ],
 
     footer: {
-      message: `<a href="/unitsdb/">UnitsDB</a> · <a href="/schemas.html">Schemas</a> · <a href="/learn/what-is-unitsml.html">Learn</a> · <a href="https://github.com/unitsml">GitHub</a>`,
+      message: `<a href="/unitsdb/">UnitsDB</a> · <a href="/schemas.html">Schemas</a> · <a href="/learn/what-is-unitsml.html">Learn</a> · <a href="/get-started.html">Get Started</a> · <a href="/software/">Software</a> · <a href="https://github.com/unitsml">GitHub</a>`,
       copyright: 'Copyright © 2026 UnitsML Group'
     },
 
@@ -131,6 +131,7 @@ export default defineConfig({
             { text: 'Overview', link: '/schemas' },
             { text: 'UnitsML XML Schemas', link: '/schemas#unitsml-xml-schemas' },
             { text: 'UnitsDB YAML Schemas', link: '/schemas#unitsdb-yaml-schemas' },
+            { text: 'Schema Browser', link: '/schemas#schema-browser' },
           ]
         }
       ],

.vitepress/posts.data.ts

@@ -7,6 +7,7 @@ interface Post {
   authors: string[]
   description: string
   lastUpdated: number | undefined
+  readingTime: number
 }
 
 declare const data: Post[]
@@ -16,14 +17,18 @@ export default createContentLoader('blog/*.md', {
   transform(raw): Post[] {
     return raw
       .filter((page) => !page.url.endsWith('/blog/'))
-      .map((page) => ({
-        title: page.frontmatter.title,
-        url: page.url,
-        date: page.frontmatter.date,
-        authors: page.frontmatter.authors || [],
-        description: page.frontmatter.description || '',
-        lastUpdated: page.lastUpdated,
-      }))
+      .map((page) => {
+        const wordCount = page.src ? page.src.split(/\s+/).length : 0
+        return {
+          title: page.frontmatter.title,
+          url: page.url,
+          date: page.frontmatter.date,
+          authors: page.frontmatter.authors || [],
+          description: page.frontmatter.description || '',
+          lastUpdated: page.lastUpdated,
+          readingTime: Math.max(1, Math.round(wordCount / 200)),
+        }
+      })
       .sort((a, b) => {
         const dateA = new Date(a.date).getTime()
         const dateB = new Date(b.date).getTime()

.vitepress/theme/components/BlogByline.vue

@@ -31,13 +31,20 @@ const authors = computed(() => {
   if (a.length === 2) return `${a[0]} & ${a[1]}`
   return a.slice(0, -1).join(', ') + ' & ' + a[a.length - 1]
 })
+
+const authorInitials = computed(() => {
+  const a = frontmatter.value.authors
+  if (!a || !Array.isArray(a) || a.length === 0) return ''
+  return a.map((name: string) => name.split(' ').map((n: string) => n[0]).join('')).join(' ')
+})
 </script>
 
 <template>
   <div class="blog-byline" v-if="authors || formattedDate">
     <div class="byline-content">
       <div class="author-info" v-if="authors">
-        <svg class="author-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <span class="author-avatar" v-if="authorInitials">{{ authorInitials }}</span>
+        <svg v-else class="author-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
           <circle cx="12" cy="7" r="4"/>
         </svg>
@@ -94,6 +101,13 @@ const authors = computed(() => {
   flex-shrink: 0;
 }
 
+.author-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.6875rem; font-weight: 700; flex-shrink: 0;
+}
+
 .date-icon {
   color: var(--vp-c-text-3);
   flex-shrink: 0;

.vitepress/theme/components/BlogIndex.vue

@@ -77,11 +77,14 @@ function formatAuthors(authors: string[]): string {
             <span class="post-authors">
               By {{ formatAuthors(post.authors) }}
             </span>
-            <span class="read-more">
-              Read article
-              <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M5 12h14M12 5l7 7-7 7"/>
-              </svg>
+            <span class="post-meta">
+              <span class="reading-time">{{ post.readingTime }} min read</span>
+              <span class="read-more">
+                Read article
+                <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </span>
             </span>
           </div>
         </div>
@@ -232,6 +235,15 @@ function formatAuthors(authors: string[]): string {
   color: var(--vp-c-text-3);
 }
 
+.post-meta {
+  display: flex; align-items: center; gap: 0.75rem;
+}
+
+.reading-time {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
 .read-more {
   display: flex;
   align-items: center;

.vitepress/theme/components/EcosystemDiagram.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vitepress'
+
+const router = useRouter()
 
 interface DiagramNode {
   id: string
@@ -50,7 +53,7 @@ function navigate(node: DiagramNode) {
     if (node.link.startsWith('http')) {
       window.open(node.link, '_blank', 'noopener')
     } else {
-      window.location.href = node.link
+      router.go(node.link)
     }
   }
 }

.vitepress/theme/components/FAQAccordion.vue

@@ -8,14 +8,14 @@ interface FAQItem {
 
 interface FAQGroup {
   title: string
-  icon: string
+  iconKey: string
   items: FAQItem[]
 }
 
 const groups: FAQGroup[] = [
   {
     title: 'General',
-    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5"/></svg>`,
+    iconKey: 'question',
     items: [
       {
         question: 'What is UnitsML?',
@@ -37,7 +37,7 @@ const groups: FAQGroup[] = [
   },
   {
     title: 'Integration & Usage',
-    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>`,
+    iconKey: 'link',
     items: [
       {
         question: 'How is UnitsML used with other standards?',
@@ -55,7 +55,7 @@ const groups: FAQGroup[] = [
   },
   {
     title: 'UnitsDB',
-    icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
+    iconKey: 'database',
     items: [
       {
         question: 'What is UnitsDB?',
@@ -88,7 +88,11 @@ function toggle(groupIdx: number, itemIdx: number) {
   <div class="faq-sections">
     <div v-for="(group, gi) in groups" :key="group.title" class="faq-group">
       <h3 class="faq-group-title">
-        <span class="faq-group-icon" v-html="group.icon"></span>
+        <span class="faq-group-icon">
+          <svg v-if="group.iconKey === 'question'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5"/></svg>
+          <svg v-else-if="group.iconKey === 'link'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
+          <svg v-else-if="group.iconKey === 'database'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+        </span>
         {{ group.title }}
       </h3>
       <div class="faq-items">
@@ -98,13 +102,19 @@ function toggle(groupIdx: number, itemIdx: number) {
           class="faq-item"
           :class="{ open: openItems.has(`${gi}-${ii}`) }"
         >
-          <button class="faq-question" @click="toggle(gi, ii)">
+          <button
+            class="faq-question"
+            :id="`faq-q-${gi}-${ii}`"
+            :aria-expanded="openItems.has(`${gi}-${ii}`)"
+            :aria-controls="`faq-a-${gi}-${ii}`"
+            @click="toggle(gi, ii)"
+          >
             <span>{{ item.question }}</span>
             <svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M6 9l6 6 6-6"/>
             </svg>
           </button>
-          <div class="faq-answer">
+          <div class="faq-answer" :id="`faq-a-${gi}-${ii}`" :role="'region'" :aria-labelledby="`faq-q-${gi}-${ii}`">
             <p>{{ item.answer }}</p>
           </div>
         </div>