codegraph/site/src/components/SocialIcons.astro

---
// 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"
	href={`${repo}/stargazers`}
	target="_blank"
	rel="noopener noreferrer"
	aria-label={`${stars} GitHub stars`}
>
	<span class="cg-star-glyph" aria-hidden="true">★</span>{stars}
</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;
		gap: 0.35rem;
		border: 1px solid var(--cg-rule);
		padding: 0.32rem 0.6rem;
		font-family: var(--sl-font);
		font-size: 0.85rem;
		font-weight: 600;
		line-height: 1;
		color: var(--cg-ink);
		text-decoration: none;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}
	.cg-star:hover {
		background: var(--cg-paper-press);
		color: var(--cg-ink);
	}
	.cg-star-glyph {
		font-size: 0.85em;
	}
	/* Keep the compact mobile header clean — the sidebar covers navigation there. */
	@media (max-width: 50rem) {
		.cg-navlink,
		.cg-star {
			display: none;
		}
	}
</style>