Skip to content

Header: GitHub repo button - #29

Merged
Iqra Shaikh (Iqra617) merged 1 commit into
mainfrom
header-github-button
Sep 25, 2026
Merged

Iqra Shaikh (Iqra617) merged 1 commit into
mainfrom
header-github-button

Conversation

@Iqra617

Copy link
Copy Markdown
Member

Brings the header's repo link in line with the container site: a neutral white pill labelled GitHub repo with the GitHub mark before the text, replacing the blue-tinted ☆ Give a star.

What changed

_includes/nav.html, one line. The mark is an inline SVG on a 24x24 viewBox, filled with currentColor so it follows the button's text colour and needs no external icon library and no extra request.

<a class="utility github" href="{{ site.repo | default: '...' }}" ... data-event="nav_github_repo">
  <span class="github-mark" aria-hidden="true"><svg viewBox="0 0 24 24">...</svg></span>GitHub repo</a>

The href is untouched: still site.repo, with the same literal fallback. The mark is aria-hidden, so the accessible name stays the visible text rather than being read twice.

The analytics event goes from nav_star to nav_github_repo, because a star event name would no longer describe what the button is. The tracker in assets/js/main.js reads data-event declaratively with no allowlist, so nothing else needed changing. Worth knowing when reading dashboards: nav_star stops here.

Styling

Submit feedback was already the neutral white .utility pill, so matching it mostly meant taking the blue tint away. Two cleanups came with that:

  • .utility.star and its hover are gone. Nothing carries .star any more, so they were dead rules.
  • The comment above the block claimed the star is tinted blue so the two buttons are told apart. That stopped being true, so it now says what actually distinguishes them.

.utility also gains an explicit line-height:17px. The mark's box is 17px and the 13px text line box is a little under that, which would have left the GitHub button a pixel or two taller than Submit feedback. Pinning the line-height to the same 17px makes the two exactly the same height, which is what "same size as Submit feedback" asks for.

No duplicates to update

The task allowed for copies in the footer and the closing CTA. There are none: this button exists only in _includes/nav.html. The footer's GitHub reference is a plain text link in .footBottom alongside Privacy and Feedback, not a pill, and the closing CTA is a single Get started button. Both were left alone.

Checks

  • npm test (house rules): passes, 36 files scanned.
  • npm run check:links: see the comment below. Note that it skips external URLs by design, so the repo href is outside its scope in any case; what it guards here is the unchanged internal nav hrefs and anchor ids. CI runs it against a real jekyll build.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@Iqra617
Iqra Shaikh (Iqra617) merged commit 955a289 into main Sep 25, 2026
3 checks passed
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