Repository navigation
Add sidebar navigation - #14
Merged
Merged
Conversation
Introduces the defining feature of a docs theme: a left sidebar listing the site's pages, nested by front-matter, with the current page highlighted and collapsible parent sections. Pages opt out with `nav_exclude: true`. Within each level, pages are ordered by `nav_order` (unset values sort last alphabetically). Child pages declare their parent by title via `parent: "Title"`. The section containing the current page is auto-opened. The visual design is ported from just-the-docs' actual SCSS: exact color palette (#7253ed link, #f5f6fa sidebar, etc.), the calc-based responsive sidebar that grows with the viewport at the lg breakpoint (keeping the visible nav block visually centered with the content), gradient hover/active states, and JTD's typography scale. Collapsible sections use <details>, but the section link and the toggle <summary> are siblings inside the <li> rather than the link being nested inside the summary -- this avoids the "nested interactive controls" accessibility violation that the obvious structure produces. A regression test guards this. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The JTD palette we ported targets WCAG AA (4.5:1). Several tokens land just below the AAA threshold (7:1) -- body text at 6.4:1, link color at 5.1:1 on white, and the dark-mode link at 6.75:1 on the sidebar. axe (with AAA enabled) flagged these across the sidebar links, the active link, the footer links, and the body text. Darken light-mode --color-stoa-fg, --color-stoa-link, --color-stoa-link-hover, and --color-stoa-muted (all to neighboring JTD palette steps where possible -- grey-dk-200, purple-200, purple-300). Lighten the dark-mode link tokens correspondingly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
AbuMareBear
force-pushed
the
ah/sidebar-navigation
branch
from
September 24, 2026 13:49
b26fc20 to
43e0de1
Compare
Replace the ported just-the-docs purple/grey palette with one built from the Guided Rails brand color (#7a1f5c, guidedrails.com). Links use it directly; sidebar, feedback, border, and text tokens are tinted toward its hue in OKLCH, in both light and dark mode. Every text/background pair still meets WCAG AAA (7:1). Muted text on the feedback background was the tightest pair and got nudged a step.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
nav_order,parent,nav_exclude), with the current page highlighted and the containing section auto-opened.#7253edlink,#f5f6fasidebar, etc.), the calc-based responsive sidebar that grows with the viewport atlg, JTD's gradient hover/active, and JTD's type scale.<details>, but the section link and the toggle<summary>are siblings inside the<li>(not nested), avoiding the "Interactive controls must not be nested" axe violation. A regression test guards this.Author API (no config — just front-matter)
nav_order: <int>— sort key within a level (unset sorts last, alphabetical)parent: "<Title>"— declare a child of the named pagenav_exclude: true— omit from the sidebarTest plan
bundle exec rake test— 13 tests / 46 assertions passbundle exec rubocop— cleanfrontend/styles/bridgetown-stoa.css)🤖 Generated with Claude Code