Skip to content

feat(docs): redesign browse page as type specimen gallery#272

Open
ronaldtse wants to merge 1 commit into
v5from
feat/browse-redesign
Open

feat(docs): redesign browse page as type specimen gallery#272
ronaldtse wants to merge 1 commit into
v5from
feat/browse-redesign

Conversation

@ronaldtse

Copy link
Copy Markdown
Contributor

What

Rebuilds the /browse/ page (FormulaBrowser.vue) from a utilitarian sidebar + card grid into an editorial type-specimen gallery — inspired by Klim Type Foundry and Swiss specimen books. Typography carries all the visual weight; chrome recedes.

Single-file rewrite. No data-schema changes, no new dependencies, no config.ts edits.

Before / After

Light mode, desktop

Before After
before after

After — dark mode, desktop

after-dark

After — mobile (375px), filter drawer open

after-mobile

Screenshots live in .screenshots/browse-redesign/ — temporary, safe to delete after review.

Design direction

  • Typography IS the design. Each formula renders as a full-width specimen band: large display-serif name (clamp(2rem, 4.5vw, 3.5rem), weight 500), mono meta row below. No cards, no shadows, no gradients on the type.
  • Monochrome dominant. Bands alternate --vp-c-bg / --vp-c-bg-soft for gallery rhythm. Rose (#bf4e6a) is restricted to ~5% of pixels: active pill border, hover underline, license-badge dot, removable-chip border.
  • Editorial chrome. Hero search is a borderless display-serif input in a sticky masthead. Alphabet nav is a thin letter strip — active letters only, dim until hover, smooth-scrolls with a scroll-margin-top that clears the masthead. Letter groups get a large ghosted serif mark.
  • Filters as curator. The checkbox sidebar is replaced by horizontal pill chips with counts. Active filters surface as removable chips (×) with a Clear all affordance.
  • Hover micro-interaction. A thin rose line draws in left-to-right across the top of each band; the name shifts to rose; a mono "View formula →" fades in.

Behavior preserved

  • formulas-data.json fetch + item schema — unchanged.
  • Search by name / formula key / family name.
  • License-category filter + source filter (same grouping logic).
  • URL params q=, license=, source= (initFromUrl + licenseParamMap intact).
  • goToFormula() keeps its no-trailing-slash URL (carries the slash-flash fix from fix(docs): eliminate slash flash on browse navigation #271 forward; origin/v5 still has the trailing slash).
  • getLicenseBadge / getSourceBadge inline-SVG badge helpers — unchanged.

Responsive

  • ≤768px: filter pills + alphabet strip become horizontal scroll; filters collapse into a toggle drawer with an active-count badge; specimen CTA aligns under the name.
  • prefers-reduced-motion disables all transitions and smooth scroll.
  • All colors via existing --vp-c-* / --fontist-* variables, so light and dark mode hold up.

Verified locally

  • npm run dev — page loads, 4283 specimens render, no component errors.
  • Search filters correctly (e.g. roboto → 6 results, count + singular/plural correct).
  • Pill filter applies + surfaces removable chip + "Clear all" resets.
  • Alphabet nav smooth-scrolls; target lands 204px below viewport top (clears sticky masthead + nav).
  • Dark-mode CSS variables resolve correctly (--vp-c-text-1 → cream, alternating bands pick up --vp-c-bg-soft).
  • 375px layout: filter drawer toggles, pills scroll horizontally.

Notes

  • Display type uses a refined system-serif stack (Iowan Old Style → Baskerville → Georgia → Times) rather than adding a web-font <link>, to avoid touching config.ts and any FOUC. Easy to swap to Fraunces later if desired.
  • The 4 PNGs in .screenshots/browse-redesign/ are the only non-docs additions; remove them anytime.

Rebuild FormulaBrowser.vue from a utilitarian sidebar+card-grid into an
editorial type-specimen gallery inspired by Klim Type Foundry and Swiss
specimen books. Typography is the design; chrome recedes.

Visual changes
- Full-width specimen bands replace the multi-column card grid. Each
  formula shows a large display-serif name, mono meta row, and a hover
  rose underline that draws in left-to-right.
- Hero search is now a borderless display-serif input in a sticky
  masthead, with a mono result count.
- Alphabet nav is a refined letter strip (active letters only, dim until
  hover, smooth-scrolls with a scroll-margin that clears the sticky
  masthead).
- License/source filters are horizontal pill chips with counts, replacing
  the checkbox sidebar. Active filters surface as removable chips with a
  'Clear all' affordance.
- Letter groups get a large ghosted serif mark and alternating
  bg/bg-soft bands for gallery rhythm.
- Rose (#bf4e6a) is restricted to <5% of pixels: active pill border,
  hover indicator, license badge dot, removable-chip border.
- Mobile (<=768px): filter pills and alphabet strip become horizontal
  scroll; filters collapse into a toggle drawer with an active-count
  badge; specimen CTA aligns under the name.
- Respects prefers-reduced-motion. Uses existing --vp-c-* / --fontist-*
  CSS variables so light and dark mode both hold up. No new runtime
  dependencies, no config.ts changes.

Behavior preserved
- formulas-data.json fetch and item schema unchanged.
- Search (name/formula/family), license-category filter, source filter.
- URL params q=, license=, source= (initFromUrl and licenseParamMap).
- goToFormula() keeps its no-trailing-slash URL (slash-flash fix).

Screenshots in .screenshots/browse-redesign/ (light before/after, dark
desktop, mobile 375px). Temporary; safe to remove after review.
@github-actions

Copy link
Copy Markdown
Contributor

🔗 Link Check Failed

Full report: workflow run → download the link-check-results artifact.

Results (truncated — see artifact for full report)

Summary

Status Count
🔍 Total 189968
✅ Successful 52559
⏳ Timeouts 13
🔀 Redirected 4480
👻 Excluded 132760
❓ Unknown 0
🚫 Errors 156
⛔ Unsupported 0

Errors per input

Errors in .vitepress/dist/browse/adobe_reader_19/index.html

Errors in .vitepress/dist/browse/adobe_reader_20/index.html

Errors in .vitepress/dist/browse/andale/index.html

Errors in .vitepress/dist/browse/arial_black/index.html

Errors in .vitepress/dist/browse/cleartype/index.html

Errors in .vitepress/dist/browse/comic/index.html

Errors in .vitepress/dist/browse/courier/index.html

Errors in .vitepress/dist/browse/dejavu/index.html

Errors in .vitepress/dist/browse/euphemia/index.html

Errors in .vitepress/dist/browse/eurofix/index.html

Errors in .vitepress/dist/browse/genkaimincho/index.html

Errors in .vitepress/dist/browse/georgia/index.html

Errors in .vitepress/dist/browse/gnu_freefont/index.html

Errors in .vitepress/dist/browse/google/finlandica/index.html

Errors in .vitepress/dist/browse/google/imbue/index.html

Errors in .vitepress/dist/browse/google/mukta_malar/index.html

Errors in .vitepress/dist/browse/google/saira_stencil_one/index.html

Errors in .vitepress/dist/browse/google/ubuntu/index.html

Errors in .vitepress/dist/browse/google/ubuntu_condensed/index.html

Errors in .vitepress/dist/browse/google/ubuntu_mono/index.html

Errors in .vitepress/dist/browse/google/ubuntu_sans/index.html

Errors in .vitepress/dist/browse/google/ubuntu_sans_mono/index.html

Errors in .vitepress/dist/browse/i.ming/index.html

Errors in .vitepress/dist/browse/i.mingcp/index.html

Errors in .vitepress/dist/browse/i.mingvar/index.html

Errors in .vitepress/dist/browse/i.mingvarcp/index.html

Errors in .vitepress/dist/browse/impact/index.html

Errors in .vitepress/dist/browse/ipa/index.html

Errors in .vitepress/dist/browse/joongnajoche/index.html

  • [ERROR] http://joonggonara.co/ | Network error: Connection failed. Check network connectivity and firewall settings (error sending request for url (http://joonggonara.co/)): Connection failed. Check network connectivity and firewall settings

Errors in .vitepress/dist/browse/lucida_grande/index.html

Errors in .vitepress/dist/browse/macos/andale_mono/index.html

Errors in .vitepress/dist/browse/macos/andale_mono_10m11177/index.html

Errors in .vitepress/dist/browse/macos/arial_black/index.html

Errors in .vitepress/dist/browse/macos/arial_black_10m11177/index.html

Errors in .vitepress/dist/browse/macos/arial_unicode_ms/index.html

Errors in .vitepress/dist/browse/macos/arial_unicode_ms_10m11177/index.html

Errors in .vitepress/dist/browse/macos/bm_yeonsung_otf/index.html

Errors in .vitepress/dist/browse/macos/bm_yeonsung_otf_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font3/andale_mono/index.html

Errors in .vitepress/dist/browse/macos/font3/arial_black/index.html

Errors in .vitepress/dist/browse/macos/font3/arial_unicode_ms/index.html

Errors in .vitepress/dist/browse/macos/font3/gill_sans/index.html

Errors in .vitepress/dist/browse/macos/font3/lucida_grande/index.html

Errors in .vitepress/dist/browse/macos/font3/myriad_arabic/index.html

Errors in .vitepress/dist/browse/macos/font3/nanum_brush_script/index.html

  • [ERROR] http://www.nhncorp.com/ | Network error: Connection failed. Check network connectivity and firewall settings (error sending request for url (http://www.nhncorp.com/)): Connection failed. Check network connectivity and firewall settings

Errors in .vitepress/dist/browse/macos/font3/nanumgothic/index.html

  • [ERROR] http://www.nhncorp.com/ | Network error: Connection failed. Check network connectivity and firewall settings (error sending request for url (http://www.nhncorp.com/)): Connection failed. Check network connectivity and firewall settings

Errors in .vitepress/dist/browse/macos/font3/nanummyeongjo/index.html

Errors in .vitepress/dist/browse/macos/font4/andale_mono/index.html

Errors in .vitepress/dist/browse/macos/font4/arial_black/index.html

Errors in .vitepress/dist/browse/macos/font4/arial_unicode_ms/index.html

Errors in .vitepress/dist/browse/macos/font4/lucida_grande/index.html

Errors in .vitepress/dist/browse/macos/font4/myriad_arabic/index.html

Errors in .vitepress/dist/browse/macos/font4/nanum_brush_script/index.html

Errors in .vitepress/dist/browse/macos/font4/nanumgothic/index.html

Errors in .vitepress/dist/browse/macos/font4/nanummyeongjo/index.html

Errors in .vitepress/dist/browse/macos/font6/andale_mono/index.html

Errors in .vitepress/dist/browse/macos/font6/arial_black/index.html

Errors in .vitepress/dist/browse/macos/font6/arial_unicode_ms/index.html

Errors in .vitepress/dist/browse/macos/font6/bm_yeonsung_otf/index.html

Errors in .vitepress/dist/browse/macos/font6/lucida_grande/index.html

Errors in .vitepress/dist/browse/macos/font6/myriad_arabic/index.html

Errors in .vitepress/dist/browse/macos/font6/nanum_brush_script/index.html

Errors in .vitepress/dist/browse/macos/font6/nanumgothic/index.html

Errors in .vitepress/dist/browse/macos/font6/nanummyeongjo/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_devanagari/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_gujarati/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_gurmukhi/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_kannada/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_malayalam/index.html

Errors in .vitepress/dist/browse/macos/font6/sama_tamil/index.html

Errors in .vitepress/dist/browse/macos/font7/andale_mono_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/arial_black_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/arial_unicode_ms_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/bm_yeonsung_otf_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/bm_yeonsung_otf_10m4185/index.html

Errors in .vitepress/dist/browse/macos/font7/lucida_grande_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/lucida_grande_10m1360/index.html

Errors in .vitepress/dist/browse/macos/font7/myriad_arabic_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/myriad_arabic_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/nanum_brush_script_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/nanumgothic_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/nanummyeongjo_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_devanagari_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_devanagari_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_gujarati_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_gujarati_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_gurmukhi_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_gurmukhi_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_kannada_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_kannada_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_malayalam_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_malayalam_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_tamil_10m1044/index.html

Errors in .vitepress/dist/browse/macos/font7/sama_tamil_10m7626/index.html

Errors in .vitepress/dist/browse/macos/font8/andale_mono_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/arial_black_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/arial_unicode_ms_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/bm_yeonsung_otf_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/lucida_grande_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/myriad_arabic_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/nanum_brush_script_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/nanumgothic_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/nanummyeongjo_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_devanagari_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_gujarati_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_gurmukhi_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_kannada_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_malayalam_10m11177/index.html

Errors in .vitepress/dist/browse/macos/font8/sama_tamil_10m11177/index.html

Errors in .vitepress/dist/browse/macos/lucida_grande/index.html

Errors in .vitepress/dist/browse/macos/lucida_grande_10m11177/index.html

Errors in .vitepress/dist/browse/macos/myriad_arabic/index.html

Errors in .vitepress/dist/browse/macos/myriad_arabic_10m11177/index.html

Errors in .vitepress/dist/browse/macos/nanum/index.html

Errors in .vitepress/dist/browse/macos/nanum_brush_script_10m11177/index.html

Errors in .vitepress/dist/browse/macos/nanumgothic/index.html

Errors in .vitepress/dist/browse/macos/nanumgothic_10m11177/index.html

Errors in .vitepress/dist/browse/macos/nanummyeongjo/index.html

Errors in .vitepress/dist/browse/macos/nanummyeongjo_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_devanagari/index.html

Errors in .vitepress/dist/browse/macos/sama_devanagari_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_gujarati/index.html

Errors in .vitepress/dist/browse/macos/sama_gujarati_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_gurmukhi/index.html

Errors in .vitepress/dist/browse/macos/sama_gurmukhi_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_kannada/index.html

Errors in .vitepress/dist/browse/macos/sama_kannada_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_malayalam/index.html

Errors in .vitepress/dist/browse/macos/sama_malayalam_10m11177/index.html

Errors in .vitepress/dist/browse/macos/sama_tamil/index.html

Errors in .vitepress/dist/browse/macos/sama_tamil_10m11177/index.html

Errors in .vitepress/dist/browse/noth/index.html

Errors in .vitepress/dist/browse/office_preview/index.html

Errors in .vitepress/dist/browse/opensuse_webcore_fonts/index.html

Errors in .vitepress/dist/browse/overpass/index.html

Errors in .vitepress/dist/browse/pclinuxos_webcore_fonts/index.html

Errors in .vitepress/dist/browse/pmingi.u/index.html

Errors in .vitepress/dist/browse/pmingi.uvar/index.html

Errors in .vitepress/dist/browse/sil/apparatus_sil/index.html

Errors in .vitepress/dist/browse/sil/khmer_7.100/index.html

Errors in .vitepress/dist/browse/sil/tirra_4.100/index.html

Errors in .vitepress/dist/browse/sil/unicode_bmp_fallback_sil/index.html

Errors in .vitepress/dist/browse/simsun_18030/index.html

Errors in .vitepress/dist/browse/source/index.html

  • [ERROR] https://www.adobe.com/ | Network error: HTTP/2 protocol error. Server may not support HTTP/2 properly (error sending request for url (https://www.adobe.com/)): HTTP/2 protocol error. Server may not support HTTP/2 properly

Errors in .vitepress/dist/browse/tex/index.html

Errors in .vitepress/dist/browse/tex_gyre_math/index.html

Errors in .vitepress/dist/browse/timemachine_wa/index.html

Errors in .vitepress/dist/browse/urw-base35-fonts/index.html

Errors in .vitepress/dist/browse/wd-xl_lubrifont/index.html

  • [ERROR] https://maoken.com/ | Network error: HTTP/2 protocol error. Server may not support HTTP/2 properly (error sending request for url (https://maoken.com/)): HTTP/2 protocol error. Server may not support HTTP/2 properly

Errors in .vitepress/dist/browse/webding/index.html

Errors in .vitepress/dist/browse/wine/index.html

Errors in .vitepress/dist/guide/choosing-formula/index.html

Errors in .vitepress/dist/licenses/adobe/index.html

Errors in .vitepress/dist/licenses/bitstream/index.html

Errors in .vitepress/dist/licenses/gpl/index.html

Errors in .vitepress/dist/licenses/lgpl/index.html

Errors in .vitepress/dist/licenses/ofl/index.html

Redirects per input

Redirects in .vitepress/dist/404/index.html

Redirects in .vitepress/dist/browse/adobe_reader_19/index.html

Redirects in .vitepress/dist/browse/adobe_reader_20/index.html

Redirects in .vitepress/dist/browse/akabara-cinderella/index.html

Redirects in .vitepress/dist/browse/andale/index.html

Redirects in .vitepress/dist/browse/aptos/index.html

Redirects in .vitepress/dist/browse/arabic/index.html

Redirects in .vitepress/dist/browse/arial_black/index.html

Redirects in .vitepress/dist/browse/asatte/index.html

Redirects in .vitepress/dist/browse/au/index.html

Redirects in .vitepress/dist/browse/au_passata_light_bold/index.html

Redirects in .vitepress/dist/browse/au_passata_oblique/index.html

Redirects in .vitepress/dist/browse/bokutachinogothic2bold/index.html

Redirects in .vitepress/dist/browse/bokutachinogothic2regular/index.html

Redirects in .vitepress/dist/browse/bokutachinogothic/index.html

Redirects in .vitepress/dist/browse/buddhism/index.html

Redirects in .vitepress/dist/browse/carlito/index.html

Redirects in .vitepress/dist/browse/chinese_simplified/index.html

Redirects in .vitepress/dist/browse/chinese_traditional/index.html

Redirects in .vitepress/dist/browse/cinderella/index.html

Redirects in .vitepress/dist/browse/cleartype/index.html

Redirects in .vitepress/dist/browse/comic/index.html

Redirects in .vitepress/dist/browse/courier/index.html

Redirects in .vitepress/dist/browse/courier_prime/index.html

Redirects in .vitepress/dist/browse/courier_prime_code/index.html

Redirects in .vitepress/dist/browse/courier_prime_cyrillic/index.html

Redirects in .vitepress/dist/browse/courier_prime_medium_and_semibold/index.html

Redirects in .vitepress/dist/browse/courier_prime_sans/index.html

Redirects in .vitepress/dist/browse/dejavu/index.html

Redirects in .vitepress/dist/browse/dengxian/index.html

Redirects in .vitepress/dist/browse/dmca_sans_serif/index.html

Redirects in .vitepress/dist/browse/dmca_sans_serif_10.0_dev1/index.html

Redirects in .vitepress/dist/browse/eb_garamond/index.html

Redirects in .vitepress/dist/browse/emoir-kaku/index.html

Redirects in .vitepress/dist/browse/eunomia/index.html

Redirects in .vitepress/dist/browse/euphemia/index.html

Redirects in .vitepress/dist/browse/eurofix/index.html

Redirects in .vitepress/dist/browse/f1.8/index.html

Redirects in .vitepress/dist/browse/fa-1/index.html

Redirects in .vitepress/dist/browse/ferrum/index.html

Redirects in .vitepress/dist/browse/fira_code/index.html

Redirects in .vitepress/dist/browse/fixedsys_excelsior/index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant