Skip to content

Improve docs layout, navigation and block styling - #238

Merged
starc007 merged 8 commits into
mainfrom
feat/docs-layout-ux
Oct 27, 2026
Merged

starc007 merged 8 commits into
mainfrom
feat/docs-layout-ux

Conversation

@starc007

Copy link
Copy Markdown
Owner

What changed

Layout and navigation

  • Category pages (/components/*, /charts) show live preview cards instead of text-only cards. Components documented only through variants show their first variant.
  • The header search shows its label and ⌘K hint from lg widths up.
  • Component and chart pages end with Previous/Next links in sidebar order. The ordering helper moved to lib/component-status.ts so the sidebar and pager share it.
  • The announcement strip sits in the page flow and scrolls away. The header and both sidebars changed from fixed to sticky.
  • Pages with a sidebar get a slim footer (GitHub, Changelog, RSS, coding agents, llms.txt, Sponsor).
  • The page transition is now 0.25s with an 8px slide (was 0.6s / 24px).

Component page content

  • A replay button next to expand remounts the demo so entrance animations play again. It also appears in expanded mode.
  • The props table has Prop / Type / Default column labels, plus an inline "Default" label on phones.
  • The description paragraphs, the "About" section and its FAQ JSON-LD are removed from component pages. Meta descriptions in lib/component-seo.ts already cover search (capped at 165 chars). The FAQ markup was dropped because structured data has to match visible content. The About text still feeds the .md pages and llms.txt.

Styling

  • Code blocks, install commands, the props table and the manual-install note use the card look: a gray frame with the header on it and an inset content panel.
  • Nested corners are concentric (inner = outer − gap): 16/8/8px for blocks and 24/8/16px for cards.
  • Icon-only buttons in site chrome are fully round.
  • Inline cubic-bezier curves are replaced with the ease-out token.

Removed

  • The Customize theme panel (components/app/preferences/*, lib/themes.ts). Light/dark and /docs/theme are unchanged.

Library fix

  • loader: the Morph and Metaballs styles seed initial values, so motion no longer writes d="undefined" / cx="undefined" before keyframes start. updatedAt is bumped for motion/loader and agents/loading-states (which bundles the file), and the changelog has a "fixed" line.

Reviewer notes

  • The sticky change is the riskiest one. I checked the header, the left sidebar and the right rail at the top, middle and bottom of a long page, and the sidebar still scrolls to the active link. On first load the last ~40px of the left sidebar sits below the fold until you scroll.
  • Category pages now mount many live previews as you scroll (54 on Components). The longest task on the dev server was 434ms.
  • ComponentAbout and its a11y test were deleted because nothing renders them now.

Testing

  • bun run check and bun test (189 pass).
  • Browser: desktop 1440/1024 and mobile 375, light and dark, covering the sticky offsets, category cards, replay from the Preview and Code tabs, pager, footer, the restyled blocks, measured radii, no horizontal scroll, and the mobile menu sheet.
  • Not checked: reduced motion, keyboard focus order through the new buttons, and real touch devices.

- show live previews on category page cards
- show the search field with its shortcut from lg widths
- add previous/next links to component pages
- let the announcement strip scroll away above a sticky header and sidebars
- add a replay button to component previews
- label props table columns
- add a slim footer to docs pages
- shorten the page transition
- replace inline easing curves with the ease-out token
- remove the Customize theme panel
@starc007
starc007 merged commit 601fa21 into main Oct 27, 2026
1 check passed
@starc007
starc007 deleted the feat/docs-layout-ux branch October 27, 2026 10:57
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