Skip to content

feat(docs): override Starlight header with a top-level site nav#368

Open
taitelee wants to merge 11 commits into
mainfrom
page-header
Open

feat(docs): override Starlight header with a top-level site nav#368
taitelee wants to merge 11 commits into
mainfrom
page-header

Conversation

@taitelee

@taitelee taitelee commented Jul 3, 2026

Copy link
Copy Markdown
Member

Summary

Adds a curated top-level Docs link to the docs site header, with a custom header layout for the sidebar-less splash homepage. Starlight has no config hook for header links, so this overrides its Header component through the sanctioned
components map. The override is our own layout — brand + primary nav pinned left, controls pinned right — rather than a copy of Starlight's default row: doc pages stay full-bleed to the edges, while the splash homepage (the only page with a hero) holds the inner content in a centered content-width column matching the hero, à la ClickHouse/Supabase.

Every control (SiteTitle, Search, ThemeSelect, SocialIcons, LanguageSelect) is still Starlight's own built-in, re-rendered through its virtual:starlight/components/* import, so their overrides and Pagefind search keep working untouched. Search keeps Starlight's expanded "Search … ⌘K" box on every page at ≥50rem (including the splash) so the keyboard shortcut stays discoverable; below 50rem — where the nav and controls fold behind the sidebar drawer — it collapses to its icon.

The single Docs link (→ /getting-started) lives in headerNav in sidebar.ts, colocated with the sidebar so the header and sidebar share one navigation source of truth. It's the way into the doc tree from the splash homepage, which hides the sidebar; every doc page already carries the full sidebar, so the nav is hidden below the md breakpoint (50rem) there. env.d.ts gains type declarations for the built-in components the override re-renders so astro check passes.

Related Issues

None

@taitelee taitelee requested review from a team and EricAndrechek July 3, 2026 16:38
@github-actions github-actions Bot added documentation Improvements or additions to documentation area/docs Documentation, site/, README labels Jul 3, 2026
@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@taitelee, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 21 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 14cac9db-7954-4410-a51c-54a087e67ea0

📥 Commits

Reviewing files that changed from the base of the PR and between 390859f and eb8bccb.

📒 Files selected for processing (1)
  • CHANGELOG.md
📝 Walkthrough

Walkthrough

This PR wires Starlight to use a custom header component, adds shared header navigation data, declares the needed virtual component types, and updates the changelog.

Changes

Custom Starlight Header Override

Layer / File(s) Summary
Header navigation data source
docs/src/config/sidebar.ts
Adds a headerNav export with header link data.
Header component implementation
docs/src/components/Header.astro
Implements the custom header markup, active-link handling, conditional search rendering, responsive controls, and scoped styling.
Config wiring, typings, and changelog
docs/astro.config.mjs, docs/src/env.d.ts, CHANGELOG.md
Registers the header override, adds typings for the virtual header components, and records the header override in the changelog.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: overriding the Starlight header to add a top-level docs nav.
Description check ✅ Passed The description accurately describes the header override, docs link, search behavior, and typed Starlight component re-renders.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch page-header
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch page-header

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown

📚 Docs preview is livehttps://73076e66-wavehouse-docs.wave-rf.workers.dev

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b37afca5-448b-414c-955c-078e506b497f

📥 Commits

Reviewing files that changed from the base of the PR and between 029fe1f and 7cc9584.

📒 Files selected for processing (4)
  • docs/astro.config.mjs
  • docs/src/components/Header.astro
  • docs/src/config/sidebar.ts
  • docs/src/env.d.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (5)
  • GitHub Check: Docs build
  • GitHub Check: Lint
  • GitHub Check: Analyze (go)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Analyze (go)
⚠️ CI failures not shown inline (2)

GitHub Actions: PR housekeeping / PR housekeeping: feat(docs): override Starlight header with a top-level site nav

Conclusion: failure

View job details

##[group]Run # Single source of truth for the rule: scripts/lint-pr-title.sh — the
 �[36;1m# Single source of truth for the rule: scripts/lint-pr-title.sh — the�[0m
 �[36;1m# SAME validator the local agent gate runs (.claude/hooks/agent-bash-gate.sh),�[0m
 �[36;1m# so CI and local can't drift. The checkout above is ref: main, so this is�[0m
 �[36;1m# always the default-branch script. Dependabot's grouped-update titles�[0m
 �[36;1m# routinely exceed the 72-char subject cap and the format isn't�[0m
 �[36;1m# configurable, so Dependabot PRs are exempt from the length check�[0m
 �[36;1m# (the format check still applies).�[0m
 �[36;1mif [[ "$PR_AUTHOR" == "dependabot[bot]" || "$PR_AUTHOR" == "app/dependabot" ]]; then�[0m
 �[36;1m  export PR_TITLE_SKIP_LENGTH=1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif reason=$(bash scripts/lint-pr-title.sh "$PR_TITLE" 2>&1); then�[0m
 �[36;1m  echo "passed=true" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  echo "PR title OK: $PR_TITLE"�[0m
 �[36;1melse�[0m
 �[36;1m  echo "passed=false" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  printf '%s\n' "$reason"�[0m
 �[36;1m  echo "::error::$(printf '%s' "$reason" | head -1)"�[0m

GitHub Actions: PR housekeeping / 0_PR housekeeping.txt: feat(docs): override Starlight header with a top-level site nav

Conclusion: failure

View job details

##[group]Run # Single source of truth for the rule: scripts/lint-pr-title.sh — the
 �[36;1m# Single source of truth for the rule: scripts/lint-pr-title.sh — the�[0m
 �[36;1m# SAME validator the local agent gate runs (.claude/hooks/agent-bash-gate.sh),�[0m
 �[36;1m# so CI and local can't drift. The checkout above is ref: main, so this is�[0m
 �[36;1m# always the default-branch script. Dependabot's grouped-update titles�[0m
 �[36;1m# routinely exceed the 72-char subject cap and the format isn't�[0m
 �[36;1m# configurable, so Dependabot PRs are exempt from the length check�[0m
 �[36;1m# (the format check still applies).�[0m
 �[36;1mif [[ "$PR_AUTHOR" == "dependabot[bot]" || "$PR_AUTHOR" == "app/dependabot" ]]; then�[0m
 �[36;1m  export PR_TITLE_SKIP_LENGTH=1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif reason=$(bash scripts/lint-pr-title.sh "$PR_TITLE" 2>&1); then�[0m
 �[36;1m  echo "passed=true" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  echo "PR title OK: $PR_TITLE"�[0m
 �[36;1melse�[0m
 �[36;1m  echo "passed=false" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  printf '%s\n' "$reason"�[0m
 �[36;1m  echo "::error::$(printf '%s' "$reason" | head -1)"�[0m
🔇 Additional comments (5)
docs/src/config/sidebar.ts (1)

86-98: LGTM!

docs/src/components/Header.astro (2)

1-24: LGTM!

Also applies to: 55-143


25-25: 🎯 Functional Correctness

Header nav links are fine as-is. docs/astro.config.mjs doesn’t define Starlight locales, so the root-absolute headerNav links and the aria-current comparison match this single-locale setup.

			> Likely an incorrect or invalid review comment.
docs/astro.config.mjs (1)

149-149: LGTM!

docs/src/env.d.ts (1)

6-7: LGTM!

Also applies to: 20-39

Comment thread docs/src/components/Header.astro Outdated
@github-project-automation github-project-automation Bot moved this from Backlog to In review in WaveHouse Task Board Jul 3, 2026
@taitelee taitelee moved this from In review to In progress in WaveHouse Task Board Jul 3, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7113524a-83cc-4c07-8965-ee81a2ab6b14

📥 Commits

Reviewing files that changed from the base of the PR and between 7cc9584 and 4b304fc.

📒 Files selected for processing (2)
  • docs/src/components/Header.astro
  • docs/src/config/sidebar.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (5)
  • GitHub Check: Docs build
  • GitHub Check: Lint
  • GitHub Check: Analyze (go)
  • GitHub Check: Analyze (go)
  • GitHub Check: Analyze (javascript-typescript)
⚠️ CI failures not shown inline (2)

GitHub Actions: PR housekeeping / PR housekeeping: feat(docs): override Starlight header with a top-level site nav

Conclusion: failure

View job details

##[group]Run # Single source of truth for the rule: scripts/lint-pr-title.sh — the
 �[36;1m# Single source of truth for the rule: scripts/lint-pr-title.sh — the�[0m
 �[36;1m# SAME validator the local agent gate runs (.claude/hooks/agent-bash-gate.sh),�[0m
 �[36;1m# so CI and local can't drift. The checkout above is ref: main, so this is�[0m
 �[36;1m# always the default-branch script. Dependabot's grouped-update titles�[0m
 �[36;1m# routinely exceed the 72-char subject cap and the format isn't�[0m
 �[36;1m# configurable, so Dependabot PRs are exempt from the length check�[0m
 �[36;1m# (the format check still applies).�[0m
 �[36;1mif [[ "$PR_AUTHOR" == "dependabot[bot]" || "$PR_AUTHOR" == "app/dependabot" ]]; then�[0m
 �[36;1m  export PR_TITLE_SKIP_LENGTH=1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif reason=$(bash scripts/lint-pr-title.sh "$PR_TITLE" 2>&1); then�[0m
 �[36;1m  echo "passed=true" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  echo "PR title OK: $PR_TITLE"�[0m
 �[36;1melse�[0m
 �[36;1m  echo "passed=false" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  printf '%s\n' "$reason"�[0m
 �[36;1m  echo "::error::$(printf '%s' "$reason" | head -1)"�[0m

GitHub Actions: PR housekeeping / 0_PR housekeeping.txt: feat(docs): override Starlight header with a top-level site nav

Conclusion: failure

View job details

##[group]Run # Single source of truth for the rule: scripts/lint-pr-title.sh — the
 �[36;1m# Single source of truth for the rule: scripts/lint-pr-title.sh — the�[0m
 �[36;1m# SAME validator the local agent gate runs (.claude/hooks/agent-bash-gate.sh),�[0m
 �[36;1m# so CI and local can't drift. The checkout above is ref: main, so this is�[0m
 �[36;1m# always the default-branch script. Dependabot's grouped-update titles�[0m
 �[36;1m# routinely exceed the 72-char subject cap and the format isn't�[0m
 �[36;1m# configurable, so Dependabot PRs are exempt from the length check�[0m
 �[36;1m# (the format check still applies).�[0m
 �[36;1mif [[ "$PR_AUTHOR" == "dependabot[bot]" || "$PR_AUTHOR" == "app/dependabot" ]]; then�[0m
 �[36;1m  export PR_TITLE_SKIP_LENGTH=1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif reason=$(bash scripts/lint-pr-title.sh "$PR_TITLE" 2>&1); then�[0m
 �[36;1m  echo "passed=true" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  echo "PR title OK: $PR_TITLE"�[0m
 �[36;1melse�[0m
 �[36;1m  echo "passed=false" >> "$GITHUB_OUTPUT"�[0m
 �[36;1m  printf '%s\n' "$reason"�[0m
 �[36;1m  echo "::error::$(printf '%s' "$reason" | head -1)"�[0m
🔇 Additional comments (7)
docs/src/config/sidebar.ts (1)

87-94: 🎯 Functional Correctness

Confirm the intended header navigation entries.

headerNav currently exposes only Docs, and Header.astro renders this array verbatim. The PR objective describes separate Getting Started, Why WaveHouse?, Architecture, API, and SDK links; if that requirement is still current, add those entries here so the header matches the product spec.

docs/src/components/Header.astro (6)

20-42: LGTM!


54-68: LGTM!


80-86: LGTM!


91-159: LGTM!

Also applies to: 179-236


46-49: 🎯 Functional Correctness

Mobile drawer toggle is still present. PageFrame.astro renders MobileMenuToggle for sidebar pages, so this override doesn’t remove the mobile sidebar entry point.

			> Likely an incorrect or invalid review comment.

168-170: 🎯 Functional Correctness

No issue: the search button keeps its accessible name. The span is already aria-hidden, and the button’s aria-label provides the label, so hiding the span here does not make the splash icon button unlabeled.

			> Likely an incorrect or invalid review comment.

Comment thread docs/src/components/Header.astro Outdated
@github-project-automation github-project-automation Bot moved this from In progress to In review in WaveHouse Task Board Jul 3, 2026
coderabbitai[bot]
coderabbitai Bot previously approved these changes Jul 3, 2026
@taitelee taitelee moved this from In review to Ready in WaveHouse Task Board Jul 3, 2026
@taitelee taitelee moved this from Ready to In review in WaveHouse Task Board Jul 6, 2026
@taitelee taitelee moved this from In review to Ready in WaveHouse Task Board Jul 6, 2026
@EricAndrechek

Copy link
Copy Markdown
Member

The docs label in the header isn't immediately clear to me that it's a link, and it also isn't vertically centered well against the wavehouse logo:
image

Also, in the old version,
image
the search bar shows large and that I can keyboard shortcut to access it quickly, which now isn't as clear
image

Also, with the header narrower now it introduces a new little UI thing: when it was full width, switching pages to the docs meant the header didn't need to re-render or change, it was the same width and stuff, but now the width changes which looks strange, but at the same time I agree the narrower looks nice on the landing page, so unsure how we should do it.

@EricAndrechek

EricAndrechek commented Jul 6, 2026

Copy link
Copy Markdown
Member

I like the changes to the search bar, but doc link still isn't aligned quite right on my view:
image

Is it that the like WaveHouse text in the WaveHouse logo isn't centered properly that makes the docs part look not centered?

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

Labels

area/docs Documentation, site/, README documentation Improvements or additions to documentation

Projects

Status: Ready

Development

Successfully merging this pull request may close these issues.

2 participants