Skip to content

docs(site): replace the navbar avatar with the Northguild logo - #106

Merged
baldurpan merged 3 commits into
mainfrom
chore/104-docs-site-logo
Oct 19, 2026
Merged

baldurpan merged 3 commits into
mainfrom
chore/104-docs-site-logo

Conversation

@baldurpan

Copy link
Copy Markdown
Contributor

Closes #104

The docs site's navbar showed the northguild GitHub org avatar, loaded from github.com on every page view. It now shows the Northguild shield logo, kept in this repository. The plan, its decisions and the finished phase ledger are in #104.

Phases landed

# Phase Commit
1 Swap the navbar logo for a repository asset 3917170

What changed

  • docs/src/assets/logo.svg is the new logo file.
  • Navbar.tsx imports the logo statically, so Next adds the /worktree prefix and content-hashes the file. The circular crop is gone, because the shield is taller than it is wide. The logo is 32px tall at its own proportions. The link's accessible name, the decorative alt="" and the focus/hover classes are unchanged.
  • Navbar.test.tsx now checks that the image is the logo file. Pointing the navbar back at the avatar fails the test.
  • The footer keeps the org avatar (D2). site-meta.ts and its generator are unchanged (D3).

Verification

  • pnpm check, typecheck, build, test (1006) and docs:test (69) all exit 0, and no test is skipped or focused.
  • A production docs build, run with a dummy GEMINI_WORKER_URL, serves the logo at /worktree/_next/static/media/logo.<hash>.svg. The page's only remaining github.com/northguild.png is the footer's.
  • Review by the reviewer subagent: PASS WITH NOTES, nothing blocking. One advisory note: in dark mode, the shield's outer navy barely shows against the navbar.
  • The maintainer checked light and dark themes and the focus ring in a browser.

No release note: changes under docs/** don't need one. The docs site deploys when this merges to main.

Phase 1 of #104. The navbar rendered the northguild GitHub org avatar,
hotlinked from github.com. It now renders the supplied shield artwork
from docs/src/assets/logo.svg via a static import, so Next applies the
/worktree basePath and content-hashes the file. The circular crop is
dropped (the shield is 1000x1317) and the height stays at 32px. The
footer keeps the avatar (D2), and site-meta.ts and its generator are
untouched (D3).

Navbar.test.tsx now pins the image source to the asset; pointing the
navbar back at the avatar URL fails the new test.

Gate 1: pnpm check, typecheck, build, test (1006) and docs:test (69) all
exit 0, and the test-marker grep is clean. A production docs build with a
dummy GEMINI_WORKER_URL serves the logo at
/worktree/_next/static/media/logo.<hash>.svg.
Gate 2: reviewer subagent, PASS WITH NOTES, nothing blocking; the notes
are in context/notes.md.
Deletes the branch-local context/notes.md, per /feature-close. #104's plan and ledger stay in the issue, which this branch's pull request closes.
@baldurpan
baldurpan enabled auto-merge (squash) October 18, 2026 21:37
@craig-o-curtis

Copy link
Copy Markdown
Contributor

Looks good overall. Nothing here is broken: the logo is now a local asset, the link's accessible name is unchanged, and CI is green. A few things are worth a look before merging:

Worth addressing

  1. The logo almost disappears in dark mode. This is the reviewer note from the description, and it's still open. The outer shield (#184165 / #22517B) is close to Nextra's dark navbar background, so only the light-blue inner shield and the white </> show. A dark-mode variant or a thin light outline would fix it. If not now, a follow-up issue would keep it from getting lost.
  2. The new test can't catch the failures it's meant to. renders the repository logo asset compares the mocked src with String(logo), which is the same import on both sides. Under Vitest the .svg import is a plain URL string. Under Next it's a StaticImageData object that carries the image's size. Swapping the avatar back fails the test, but a missing viewBox or a wrong /worktree prefix doesn't. Checking that src contains logo and doesn't contain github.com would describe what the test actually guarantees.
  3. The height is set twice. height={32} and style={{ height: "2rem", width: "auto" }} both size the image, and the style wins. They only agree while the root font size is 16px. Keeping just height={32} gives one source of truth, and Next derives the width from the SVG's aspect ratio.

Minor

  1. role="img" aria-label="Northguild logo" in logo.svg does nothing when the file is loaded through <img>. It also contradicts the deliberate alt="". If someone later pastes the SVG straight into a component, the link's name would become "Northguild logo Worktree home page", which is the WCAG 2.5.3 problem the comment in Navbar.tsx guards against. I'd remove both attributes.
  2. The footer still loads github.com/northguild.png on every page. Keeping it was a deliberate decision in docs-site-logo #104 (D2), so this isn't a blocker. Just noting that the "loaded from github.com on every page view" request still happens, from the footer now.
  3. The new toHaveAttribute adds one more jest-dom type error in Navbar.test.tsx. The per-file count in context/findings.md drifts again as a result. That count was probably already out of date, so this is low priority.

From the review on #106:

- Size the logo with height={32} alone. The 2rem style overrode it and
  only agreed with it at a 16px root font size. Next derives the width
  from the SVG's 1000x1317 aspect ratio.
- Drop role="img" and aria-label from logo.svg. Through <img alt="">
  they were inert, and if the SVG were ever inlined they would add
  "Northguild logo" to the home link's name (WCAG 2.5.3).
- Check that the logo test's src is an SVG, an inlined data URI or a
  .svg path, before comparing it with the import. If the import were
  ever a stringified StaticImageData object, both sides would equal
  "[object Object]" and the comparison would pass. The new assertion
  uses no jest-dom matcher, so the docs tsc count is back to main's 5
  for this file.

Gate 1: pnpm check, typecheck, build, test (1006) and docs:test (69)
all exit 0. Pointing the navbar back at the avatar URL, or passing an
object src, fails the test. A production docs build serves
/worktree/_next/static/media/logo.<hash>.svg.
@baldurpan

Copy link
Copy Markdown
Contributor Author

@craig-o-curtis thanks for the review. Points 2–4 are fixed in 86c024d. 1, 5 and 6 below.

  1. Dark mode: not changed in this PR. The maintainer checked the dark theme in a browser before the PR opened and accepted it. A dark-mode variant or a light outline would change the supplied artwork, so that is the maintainer's decision. A follow-up issue can be opened if they want one.
  2. Test: you were right that the comparison could pass vacuously. Your suggested check (src contains logo) wouldn't pass, though: Vite inlines an SVG this small as a data:image/svg+xml,… URI, so under Vitest the src is the SVG markup itself, not a path. The test now first checks that src is an SVG (an inlined data: URI or a .svg path), then compares it with the import. Two mutations now fail it: pointing the navbar back at the avatar URL, and passing an object src (the [object Object] case). A missing viewBox or a wrong /worktree prefix can't be caught here, because next/image is mocked. The production build check covers those, and it serves /worktree/_next/static/media/logo.<hash>.svg.
  3. Height: only height={32} is left. Next derives the width from the 1000×1317 aspect ratio.
  4. role / aria-label: removed from logo.svg.
  5. Footer: yes, that's D2. The footer's github.com/northguild.png request remains on purpose.
  6. Type errors: the new assertion uses getAttribute with toMatch and toBe, not jest-dom, so Navbar.test.tsx is back to main's 5 errors. The per-file count in findings.md was already stale on main (it records 3 for this file), so I left it alone.

Gate 1 is green: check, typecheck, build, test (1006) and docs:test (69).

@craig-o-curtis craig-o-curtis left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks — 86c024d covers 2–4: the test now rejects the avatar and an object src before comparing, sizing is down to height={32}, and the SVG's role/aria-label are gone. Good catch on Vite inlining the SVG as a data URI. Fine with 5 and 6 as you've left them; dark mode (1) stays a separate call if we want a variant later.

@baldurpan
baldurpan merged commit 6dcda55 into main Oct 19, 2026
1 check passed
@baldurpan
baldurpan deleted the chore/104-docs-site-logo branch October 19, 2026 12:38
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.

docs-site-logo

2 participants