feat(site): add Docs & Languages links to the docs header (#377)

Bring the Starlight docs header to parity with the landing nav — now
Docs · Languages · GitHub · star pill, in that order. Added via the
SocialIcons slot (no full header rebuild, so search/theme/mobile keep
working); the text links and star pill are hidden on mobile, where the
sidebar already covers navigation.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Colby Mchenry
2026-05-24 13:27:45 -05:00
committed by GitHub
co-authored by Claude Opus 4.7
parent 7f30c4f5c8
commit 6a2098b199
+22 -3
View File
@@ -1,13 +1,18 @@
---
// Keep Starlight's default social icons (the GitHub link) and append a live
// star-count pill, matching the landing page nav.
// Docs-header right cluster: Docs + Languages text links, Starlight's default
// social icons (the GitHub link), and a live star-count pill — same order as
// the landing nav (Docs · Languages · GitHub · Star). Done here, in the slot we
// already own, to avoid a full header rebuild that could break search/mobile.
import Default from '@astrojs/starlight/components/SocialIcons.astro';
import { getStarsLabel } from '../lib/github';
const stars = await getStarsLabel();
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
const repo = 'https://github.com/colbymchenry/codegraph';
---
<a class="cg-navlink" href={`${base}/getting-started/introduction/`}>Docs</a>
<a class="cg-navlink" href={`${base}/reference/languages/`}>Languages</a>
<Default {...Astro.props} />
<a
class="cg-star"
@@ -20,6 +25,19 @@ const repo = 'https://github.com/colbymchenry/codegraph';
</a>
<style>
.cg-navlink {
font-family: var(--sl-font);
font-size: 0.9rem;
font-weight: 500;
line-height: 1;
color: var(--cg-ink);
text-decoration: none;
white-space: nowrap;
}
.cg-navlink:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.cg-star {
display: inline-flex;
align-items: center;
@@ -42,8 +60,9 @@ const repo = 'https://github.com/colbymchenry/codegraph';
.cg-star-glyph {
font-size: 0.85em;
}
/* Don't crowd the compact mobile header. */
/* Keep the compact mobile header clean — the sidebar covers navigation there. */
@media (max-width: 50rem) {
.cg-navlink,
.cg-star {
display: none;
}