Переглянути джерело

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>
Colby Mchenry 4 тижнів тому
батько
коміт
6a2098b199
1 змінених файлів з 22 додано та 3 видалено
  1. 22 3
      site/src/components/SocialIcons.astro

+ 22 - 3
site/src/components/SocialIcons.astro

@@ -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;
 		}