Repository navigation
feat(docs): release 0.16.0 with a sidebar built from Equality's Nav parts - #212
Conversation
dfbc6d6 to
a8d615c
Compare
e254a18 to
8830fdb
Compare
tmccoy14
left a comment
tmccoy14
left a comment
There was a problem hiding this comment.
Great to have the docs sidebar on the real Nav parts. Mostly concerns about what this costs without JS and on page load.
| <script> | ||
| import '@eqtylab/docs/scripts/eq-nav-group.ts'; | ||
| </script> | ||
| <DocsNavList nodes={nodes} client:idle={{ timeout: 500 }} /> |
There was a problem hiding this comment.
NavTree renders in both Sidebar.astro and NavDrawer.astro, so every page now serialises the full nav tree into island props twice and hydrates two React trees of every folder. Before, the sidebar was zero-JS <details>. The drawer copy is hidden on desktop, so client:media (or client:visible) there would at least halve it. The two copies also keep separate open/closed state.
| <DocsNavList nodes={nodes} client:idle={{ timeout: 500 }} /> | ||
|
|
||
| {/* Without JavaScript a folder's header never opens it, so every folder shows open */} | ||
| <noscript> |
There was a problem hiding this comment.
With JS off this forces closed folders open, but the trigger keeps data-state="closed" and aria-expanded="false". The chevron points closed and screen readers announce "collapsed" over visible links. It also reaches into Equality's private markup (li > div > div > ul) with !important, so any change to NavListExpandableContent's wrappers silently breaks it. Could this live in Equality as @media (scripting: none) rules on .nav-list-expandable[data-state='closed'], so other consumers get it too?
| return Object.fromEntries( | ||
| Object.entries(attrs ?? {}) | ||
| .filter(([key]) => key === 'id' || key.startsWith('data-') || key.startsWith('aria-')) | ||
| .filter(([, value]) => value !== false) |
There was a problem hiding this comment.
This drops aria-* attrs set to false, so { aria-expanded: false } disappears instead of rendering "false". The old NavTree kept them, and the changelog only mentions true. Only non-aria false should be dropped. Also, since these are spread last (line 50) and NavListItem spreads props after its own attrs, a config aria-current or data-slot overrides the row's state and slot. It's worth filtering those two keys out.
8830fdb to
31164a5
Compare
31164a5 to
6667cd1
Compare
…arts Need: readers of every docs site should get the same sidebar as Equality's Nav, with folders that open and close. Problem: the docs sidebar was a hand-rolled details tree with its own script, colours and row sizes. Solution: DocsNavList renders the sidebar and drawer from NavList and NavListExpandable, opening the folders that hold the current page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Need: readers should see that a link in a table or alert is a link. Problem: tables and alerts render through Equality and are marked as chrome, so the prose styles skipped everything inside them. Solution: links and inline code inside tables and alerts take the prose link and code styles. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… values intact Need: Readers without JavaScript and screen reader users need every sidebar link and its states. Problem: A closed folder could never open without JavaScript, `aria-*: true` from config rendered as an empty value, and two links with one label shared a key. Solution: A noscript rule shows every folder open, `aria-*` keeps "true", and row keys include their position. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Need: Readers shouldn't pay for a sidebar they can't see. Problem: The sidebar and the mobile drawer each loaded the full nav tree's script on every page, though one is always hidden. Solution: The sidebar loads it from `lg` up and the drawer below `lg`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…link attrs Need: Sites that set `aria-*` on sidebar links need those values read out, and every reader needs the current page marked correctly. Problem: An `aria-*` set to `false` was dropped, and config could override the row's `aria-current`, `data-current`, `data-slot` and `data-drill`. Solution: `aria-*` false renders as "false", and the row's own attributes can't be set from config. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Need: Readers without JavaScript need sidebar folders that show open and aren't announced as collapsed. Problem: The sidebar forced folders open with its own CSS on Equality's private markup, while each folder still said "collapsed". The Nav folders also ship in 5.2.0, not 5.1.0. Solution: Equality 5.2.0 handles folders without JavaScript, so the sidebar's own fallback is gone and the docs require 5.2.0. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
6667cd1 to
51b17a9
Compare
Need: Sites upgrading to @eqtylab/docs 0.16.0 need the Equality release its sidebar is built from. Problem: The peer range allowed 5.2.0, the Button release, which has no Nav folders. Solution: Require 5.3.0, the release #210 shipped them in. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Review focus
Merging publishes
@eqtylab/docs0.16.0, which needs Equality 5.3.0. Start withDocsNavList.tsx, thenNavTree.astro.Need
Docs sites should get their sidebar from Equality, so it matches Studio and fixes land in one place.
Problem
The docs sidebar was its own
<details>tree, with its own script, styles and current-row colour.Change
NavListExpandableandNavListItem; the old group script goes.Evidence
docs tests (218 + 7), the build, lint, Prettier and
astro checkpass on this branch.Not covered
A folder header does nothing until the sidebar's script loads, at the page's first idle moment or half a second at most.
Part of GRD-193 · GRD-81
🤖 Generated with Claude Code