Skip to content

Commit 6a2098b

Browse files
colbymchenryclaude
colbymchenry
and
claude
authored
feat(site): add Docs & Languages links to the docs header (colbymchenry#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>
1 parent 7f30c4f commit 6a2098b

1 file changed

Lines changed: 22 additions & 3 deletions

File tree

‎site/src/components/SocialIcons.astro‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
---
2-
// Keep Starlight's default social icons (the GitHub link) and append a live
3-
// star-count pill, matching the landing page nav.
2+
// Docs-header right cluster: Docs + Languages text links, Starlight's default
3+
// social icons (the GitHub link), and a live star-count pill — same order as
4+
// the landing nav (Docs · Languages · GitHub · Star). Done here, in the slot we
5+
// already own, to avoid a full header rebuild that could break search/mobile.
46
import Default from '@astrojs/starlight/components/SocialIcons.astro';
57
import { getStarsLabel } from '../lib/github';
68
79
const stars = await getStarsLabel();
10+
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
811
const repo = 'https://github.com/colbymchenry/codegraph';
912
---
1013

14+
<a class="cg-navlink" href={`${base}/getting-started/introduction/`}>Docs</a>
15+
<a class="cg-navlink" href={`${base}/reference/languages/`}>Languages</a>
1116
<Default {...Astro.props} />
1217
<a
1318
class="cg-star"
@@ -20,6 +25,19 @@ const repo = 'https://github.com/colbymchenry/codegraph';
2025
</a>
2126

2227
<style>
28+
.cg-navlink {
29+
font-family: var(--sl-font);
30+
font-size: 0.9rem;
31+
font-weight: 500;
32+
line-height: 1;
33+
color: var(--cg-ink);
34+
text-decoration: none;
35+
white-space: nowrap;
36+
}
37+
.cg-navlink:hover {
38+
text-decoration: underline;
39+
text-underline-offset: 4px;
40+
}
2341
.cg-star {
2442
display: inline-flex;
2543
align-items: center;
@@ -42,8 +60,9 @@ const repo = 'https://github.com/colbymchenry/codegraph';
4260
.cg-star-glyph {
4361
font-size: 0.85em;
4462
}
45-
/* Don't crowd the compact mobile header. */
63+
/* Keep the compact mobile header clean — the sidebar covers navigation there. */
4664
@media (max-width: 50rem) {
65+
.cg-navlink,
4766
.cg-star {
4867
display: none;
4968
}

0 commit comments

Comments
 (0)