feat: UX polish — hero, navigation, interactivity, accessibility

.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;