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:
co-authored by
Claude Opus 4.7
parent
7f30c4f5c8
commit
6a2098b199
@@ -1,13 +1,18 @@
|
|||||||
---
|
---
|
||||||
// Keep Starlight's default social icons (the GitHub link) and append a live
|
// Docs-header right cluster: Docs + Languages text links, Starlight's default
|
||||||
// star-count pill, matching the landing page nav.
|
// 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 Default from '@astrojs/starlight/components/SocialIcons.astro';
|
||||||
import { getStarsLabel } from '../lib/github';
|
import { getStarsLabel } from '../lib/github';
|
||||||
|
|
||||||
const stars = await getStarsLabel();
|
const stars = await getStarsLabel();
|
||||||
|
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
|
||||||
const repo = 'https://github.com/colbymchenry/codegraph';
|
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} />
|
<Default {...Astro.props} />
|
||||||
<a
|
<a
|
||||||
class="cg-star"
|
class="cg-star"
|
||||||
@@ -20,6 +25,19 @@ const repo = 'https://github.com/colbymchenry/codegraph';
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.cg-star {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -42,8 +60,9 @@ const repo = 'https://github.com/colbymchenry/codegraph';
|
|||||||
.cg-star-glyph {
|
.cg-star-glyph {
|
||||||
font-size: 0.85em;
|
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) {
|
@media (max-width: 50rem) {
|
||||||
|
.cg-navlink,
|
||||||
.cg-star {
|
.cg-star {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user