From f54975ce54f2f9478a83e9f56d8866a3834c5019 Mon Sep 17 00:00:00 2001 From: Ronald Tse Date: Thu, 30 Apr 2026 08:36:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20UX=20polish=20=E2=80=94=20hero,=20navig?= =?UTF-8?q?ation,=20interactivity,=20accessibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hero: SI dim symbols, gradient accent animation, trimmed CTAs - Homepage: reduce from 8 to 5 sections, add CTA strip - Navigation: schemas sidebar expansion, footer links update - UnitsDB browser: ⌘K shortcut, per-type color accents on tabs - Entity detail: mobile floating back button, authority logo badges - Scroll-reveal observer for content pages (.reveal class) - About page: inline TOC pills for section navigation - Blog: reading time estimate, author initials fallback - Accessibility: focus indicators, prefers-reduced-motion overrides - Dark mode: badge backgrounds, reduced-motion skip --- .vitepress/config.ts | 3 +- .vitepress/posts.data.ts | 21 +- .vitepress/theme/components/BlogByline.vue | 16 +- .vitepress/theme/components/BlogIndex.vue | 22 +- .vitepress/theme/components/HomePage.vue | 571 +++++++----------- .../theme/components/NavScrollHandler.vue | 12 + .../theme/components/UnitsDBBrowser.vue | 25 +- .../theme/components/UnitsDBEntityDetail.vue | 24 + .vitepress/theme/custom.css | 80 ++- TODO.improve/01-hero-polish.md | 117 ++++ TODO.improve/02-homepage-section-reduction.md | 124 ++++ TODO.improve/03-navigation-restructure.md | 123 ++++ TODO.improve/04-unitsdb-browser-ux.md | 158 +++++ TODO.improve/05-interactivity-animation.md | 166 +++++ TODO.improve/06-content-pages-polish.md | 185 ++++++ TODO.improve/07-dark-mode-polish.md | 128 ++++ TODO.improve/README.md | 28 + about.md | 24 + 18 files changed, 1427 insertions(+), 400 deletions(-) create mode 100644 TODO.improve/01-hero-polish.md create mode 100644 TODO.improve/02-homepage-section-reduction.md create mode 100644 TODO.improve/03-navigation-restructure.md create mode 100644 TODO.improve/04-unitsdb-browser-ux.md create mode 100644 TODO.improve/05-interactivity-animation.md create mode 100644 TODO.improve/06-content-pages-polish.md create mode 100644 TODO.improve/07-dark-mode-polish.md create mode 100644 TODO.improve/README.md diff --git a/.vitepress/config.ts b/.vitepress/config.ts index cbe44bf..395b8bb 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -86,7 +86,7 @@ export default defineConfig({ ], footer: { - message: `UnitsDB · Schemas · Learn · GitHub`, + message: `UnitsDB · Schemas · Learn · Get Started · Software · GitHub`, 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' }, ] } ], diff --git a/.vitepress/posts.data.ts b/.vitepress/posts.data.ts index 795f04e..233449b 100644 --- a/.vitepress/posts.data.ts +++ b/.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() diff --git a/.vitepress/theme/components/BlogByline.vue b/.vitepress/theme/components/BlogByline.vue index 430d768..b692a97 100644 --- a/.vitepress/theme/components/BlogByline.vue +++ b/.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(' ') +})