From b379874d87bf9af9ee12e59ae2e2f438462bdd81 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Sun, 13 Sep 2026 16:30:06 -0700
Subject: [PATCH 1/2] doc: show GitHub stars and Discord members in the navbar

Replaces the stock GitHub and Discord social links with a small component
using the hand-drawn icons from moq.dev, each with a live count fetched in
the browser and cached in localStorage for an hour. The stock social links
now hold @kixelated's X, Bluesky, and LinkedIn.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 doc/.vitepress/config.ts           |   7 +-
 doc/.vitepress/theme/Community.vue | 109 +++++++++++++++++++++++++++++
 doc/.vitepress/theme/index.js      |   5 +-
 doc/public/emoji/discord.svg       |  66 +++++++++++++++++
 doc/public/emoji/github.svg        |  50 +++++++++++++
 5 files changed, 234 insertions(+), 3 deletions(-)
 create mode 100644 doc/.vitepress/theme/Community.vue
 create mode 100644 doc/public/emoji/discord.svg
 create mode 100644 doc/public/emoji/github.svg

diff --git a/doc/.vitepress/config.ts b/doc/.vitepress/config.ts
index e816e25ebb..613e7df4ad 100644
--- a/doc/.vitepress/config.ts
+++ b/doc/.vitepress/config.ts
@@ -193,9 +193,12 @@ export default defineConfig({
 			],
 		},
 
+		// GitHub and Discord are rendered by theme/Community.vue instead, with
+		// live counts and the hand-drawn icons from moq.dev.
 		socialLinks: [
-			{ icon: "github", link: "https://github.com/moq-dev/moq" },
-			{ icon: "discord", link: "https://discord.gg/FCYF3p99mr" },
+			{ icon: "x", link: "https://x.com/kixelated" },
+			{ icon: "bluesky", link: "https://bsky.app/profile/kixel.me" },
+			{ icon: "linkedin", link: "https://www.linkedin.com/in/luke-curley-635a457/" },
 		],
 
 		editLink: {
diff --git a/doc/.vitepress/theme/Community.vue b/doc/.vitepress/theme/Community.vue
new file mode 100644
index 0000000000..7115669bd4
--- /dev/null
+++ b/doc/.vitepress/theme/Community.vue
@@ -0,0 +1,109 @@
+<script setup>
+/**
+ * GitHub stars and Discord members in the navbar, with the hand-drawn icons
+ * from moq.dev in place of VitePress's stock social links.
+ *
+ * The counts are fetched in the browser because the site is static and only
+ * rebuilt on deploy. Both APIs allow anonymous CORS requests; GitHub's limit is
+ * 60/hour per IP, so the result is cached in localStorage for an hour rather
+ * than refetched on every page.
+ */
+import { onMounted, ref } from "vue";
+
+const GITHUB = "https://api.github.com/repos/moq-dev/moq";
+const DISCORD = "https://discord.com/api/v10/invites/FCYF3p99mr?with_counts=true";
+
+const CACHE_KEY = "moq.stats";
+const CACHE_TTL = 60 * 60 * 1000;
+
+const stars = ref();
+const chatters = ref();
+
+function readCache() {
+	try {
+		const cached = JSON.parse(localStorage.getItem(CACHE_KEY));
+		if (cached && Date.now() - cached.at <= CACHE_TTL) return cached;
+	} catch {}
+}
+
+function writeCache(stats) {
+	try {
+		localStorage.setItem(CACHE_KEY, JSON.stringify({ ...stats, at: Date.now() }));
+	} catch {}
+}
+
+async function fetchNumber(url, key) {
+	try {
+		// Discord echoes the requesting origin in Access-Control-Allow-Origin but
+		// marks the response cacheable without `Vary: Origin`, so a response cached
+		// for moq.dev fails the CORS check on doc.moq.dev. Skip the HTTP cache;
+		// localStorage above is the cache.
+		const res = await fetch(url, { cache: "no-store" });
+		if (!res.ok) return;
+		const value = (await res.json())[key];
+		return typeof value === "number" ? value : undefined;
+	} catch {}
+}
+
+onMounted(async () => {
+	let stats = readCache();
+	if (!stats) {
+		const [s, c] = await Promise.all([
+			fetchNumber(GITHUB, "stargazers_count"),
+			fetchNumber(DISCORD, "approximate_member_count"),
+		]);
+		stats = { stars: s, chatters: c };
+		if (s !== undefined || c !== undefined) writeCache(stats);
+	}
+	stars.value = stats.stars;
+	chatters.value = stats.chatters;
+});
+</script>
+
+<template>
+	<div class="moq-community">
+		<a href="https://github.com/moq-dev/moq" title="GitHub">
+			<img src="/emoji/github.svg" alt="GitHub" />
+			<span v-if="stars !== undefined">{{ stars.toLocaleString() }}</span>
+		</a>
+		<a href="https://discord.moq.dev" title="Discord">
+			<img src="/emoji/discord.svg" alt="Discord" />
+			<span v-if="chatters !== undefined">{{ chatters.toLocaleString() }}</span>
+		</a>
+	</div>
+</template>
+
+<style scoped>
+.moq-community {
+	display: none;
+}
+
+@media (min-width: 768px) {
+	.moq-community {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-left: 1rem;
+	}
+}
+
+.moq-community a {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: var(--vp-c-brand-1);
+	text-decoration: none;
+}
+
+.moq-community img {
+	height: 1.75rem;
+	width: auto;
+	transition: transform 0.25s;
+}
+
+.moq-community a:hover img {
+	transform: rotate(-6deg);
+}
+</style>
diff --git a/doc/.vitepress/theme/index.js b/doc/.vitepress/theme/index.js
index c4fdf26edc..9f500b36a6 100644
--- a/doc/.vitepress/theme/index.js
+++ b/doc/.vitepress/theme/index.js
@@ -1,14 +1,17 @@
 import { h } from "vue";
 import DefaultTheme from "vitepress/theme";
 import Banner from "./Banner.vue";
+import Community from "./Community.vue";
 import "./custom.css";
 
 export default {
 	extends: DefaultTheme,
 	Layout() {
-		// Render the site-wide notice above every page via the layout-top slot.
+		// Render the site-wide notice above every page via the layout-top slot,
+		// and the GitHub/Discord counts at the end of the navbar.
 		return h(DefaultTheme.Layout, null, {
 			"layout-top": () => h(Banner),
+			"nav-bar-content-after": () => h(Community),
 		});
 	},
 };
diff --git a/doc/public/emoji/discord.svg b/doc/public/emoji/discord.svg
new file mode 100644
index 0000000000..df2ce338a1
--- /dev/null
+++ b/doc/public/emoji/discord.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="2 -5 110 150" preserveAspectRatio="xMidYMid meet">
+<path fill="#01BB2D" opacity="1.000000" stroke="none"
+	d="
+M14.412026,109.565445
+	C8.422318,104.627380 7.629257,98.085968 8.605453,91.588387
+	C10.788442,77.058350 16.779669,63.865246 24.680202,51.591518
+	C25.778408,49.885422 28.584875,49.122509 30.745533,48.307209
+	C32.413681,47.677753 34.299114,47.543724 36.105259,47.377178
+	C39.832539,47.033482 43.671646,45.802170 46.871674,49.257141
+	C47.572395,50.013687 49.329849,50.052330 50.580109,49.992493
+	C55.228844,49.770004 59.869591,49.376183 64.511757,49.025757
+	C65.169090,48.976131 66.208374,49.029858 66.412277,48.666336
+	C70.011909,42.248859 74.959366,46.048832 79.558052,46.784630
+	C85.681480,47.764393 90.061684,49.843872 92.914902,56.459167
+	C99.069603,70.729080 105.658875,84.736191 105.769798,100.626846
+	C105.785965,102.943375 104.083229,106.002678 102.200752,107.449654
+	C98.275009,110.467140 93.769081,112.770851 89.369797,115.121269
+	C83.345528,118.339897 80.614632,117.879814 76.538361,112.390038
+	C74.465866,109.598877 72.565826,108.939949 69.454063,110.279343
+	C61.121796,113.865776 52.695091,113.867310 44.118458,110.897499
+	C42.940060,110.489456 40.656792,111.304955 39.776134,112.324036
+	C34.124241,118.864388 34.123718,119.144928 25.943146,115.940956
+	C21.992617,114.393700 18.418114,111.886345 14.412026,109.565445
+M86.816277,59.756866
+	C84.324394,55.255428 79.841133,54.502949 75.836372,57.602409
+	C74.672211,58.503410 72.808899,58.899563 71.280777,58.865623
+	C62.836460,58.678066 54.394753,58.327148 45.956924,57.930511
+	C44.190777,57.847488 42.276859,57.692616 40.721016,56.957294
+	C36.162453,54.802826 31.467178,55.689960 29.413561,60.195335
+	C25.077616,69.707848 20.824823,79.299171 17.360119,89.147415
+	C16.008318,92.989830 16.600050,97.628174 16.874386,101.867249
+	C16.965492,103.275063 18.557758,105.183159 19.937038,105.794266
+	C23.566484,107.402344 27.426565,108.529823 31.265947,109.591324
+	C32.059483,109.810715 33.417496,109.142021 34.029903,108.451881
+	C34.429077,108.002045 34.058685,106.746582 33.843613,105.900139
+	C33.404430,104.171715 32.837402,102.475777 32.323032,100.766457
+	C34.330944,100.461571 36.341949,99.906044 38.345798,99.930748
+	C39.961143,99.950661 41.692429,100.413757 43.158260,101.122726
+	C53.034748,105.899666 62.583706,103.797935 72.094284,99.980438
+	C73.789993,99.299797 75.472656,98.468536 77.242844,98.115608
+	C81.213219,97.323997 83.623627,100.271866 82.257309,104.079826
+	C81.943810,104.953568 81.495041,105.778770 80.331604,108.329933
+	C83.414520,108.121223 85.536423,108.513214 87.096039,107.752464
+	C89.754128,106.455910 91.932732,104.204048 94.544373,102.777519
+	C97.768486,101.016449 98.544685,98.541382 97.564926,95.287506
+	C94.072250,83.687958 90.536797,72.101288 86.816277,59.756866
+z"/>
+<path fill="#01BC2D" opacity="1.000000" stroke="none"
+	d="
+M65.089645,79.122261
+	C70.314842,75.262909 74.025833,75.494324 77.994507,79.640495
+	C81.671921,83.482376 81.855835,88.789436 78.444557,92.627617
+	C75.258316,96.212601 70.100357,97.032394 66.308540,94.556503
+	C62.040352,91.769539 60.809566,86.347412 63.365753,81.386177
+	C63.738380,80.662964 64.332848,80.054047 65.089645,79.122261
+z"/>
+<path fill="#00BE2D" opacity="1.000000" stroke="none"
+	d="
+M47.210079,93.445389
+	C41.648193,96.183182 38.267605,95.359055 35.416260,90.904373
+	C32.841778,86.882240 33.528927,81.602097 37.003811,78.705429
+	C40.161900,76.072853 44.458244,76.286339 47.889301,79.246338
+	C51.539322,82.395241 52.028500,86.921936 49.146183,91.323082
+	C48.697662,92.007950 48.055439,92.565964 47.210079,93.445389
+z"/>
+</svg>
diff --git a/doc/public/emoji/github.svg b/doc/public/emoji/github.svg
new file mode 100644
index 0000000000..1ddcb5cb98
--- /dev/null
+++ b/doc/public/emoji/github.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="17 0 104 150" preserveAspectRatio="xMidYMid meet">
+<path fill="#01BC2D" opacity="1.000000" stroke="none" 
+	d="
+M82.866119,114.839363 
+	C83.351608,109.198975 82.327309,104.600609 78.621597,100.560867 
+	C75.882706,97.575111 76.815384,94.611389 80.372223,92.847687 
+	C83.190704,91.450104 86.110451,89.996391 89.151329,89.354607 
+	C99.966644,87.072052 109.646027,70.350182 104.333977,59.761082 
+	C102.857063,56.816998 101.508720,53.673588 100.886421,50.469173 
+	C100.078423,46.308491 100.055069,41.995434 99.614014,36.807545 
+	C95.877304,38.153629 91.361671,39.912476 86.751633,41.373425 
+	C85.002563,41.927719 83.038452,41.920017 81.168320,41.955456 
+	C73.346680,42.103668 65.521652,42.297581 57.702141,42.182838 
+	C55.635647,42.152512 53.381153,41.436428 51.570908,40.406273 
+	C48.350330,38.573540 45.402973,36.260700 42.341335,34.148674 
+	C41.733917,34.398796 41.126495,34.648918 40.519077,34.899044 
+	C40.332390,37.818043 40.309254,40.759773 39.907677,43.648903 
+	C39.581699,45.994118 39.392990,48.690037 38.117752,50.512905 
+	C33.219753,57.514286 32.126060,71.433601 40.548367,79.813179 
+	C45.860477,85.098335 51.528561,89.219452 58.984982,90.823738 
+	C64.179916,91.941452 64.409767,93.832870 62.382629,98.618767 
+	C60.830563,102.283051 60.553055,106.528740 59.988792,110.555092 
+	C59.621319,113.177208 60.288570,116.044807 59.490105,118.472870 
+	C58.897900,120.273712 56.694118,121.544609 55.208221,123.051575 
+	C53.775902,121.504280 52.109409,120.104744 51.003159,118.351692 
+	C50.385395,117.372726 50.698204,115.806534 50.546402,113.951759 
+	C42.243080,114.723320 34.946587,112.612007 29.212339,106.502975 
+	C27.163677,104.320427 25.141218,102.069855 23.456055,99.610970 
+	C22.784985,98.631790 23.059526,97.004539 22.903585,95.672318 
+	C24.290554,95.649429 25.993359,95.095901 27.007454,95.699493 
+	C30.575670,97.823273 33.869122,100.402199 37.338715,102.699875 
+	C41.403618,105.391792 45.737144,106.638161 50.779411,104.604065 
+	C51.013542,102.577316 51.254211,100.493973 51.491310,98.441559 
+	C32.029919,93.159149 20.057278,67.474464 30.693949,48.711327 
+	C31.653214,47.019180 31.544834,44.661640 31.699944,42.595669 
+	C31.797617,41.294693 31.259136,39.946545 31.353109,38.644611 
+	C32.172550,27.291985 36.423378,23.663591 46.657860,28.251350 
+	C54.527096,31.778854 61.775826,32.123226 69.889175,31.228401 
+	C74.535606,30.715944 79.381767,32.144890 84.151726,32.529682 
+	C85.336876,32.625290 86.633125,32.211182 87.778038,31.770727 
+	C90.874413,30.579538 93.840485,29.003508 96.995163,28.018772 
+	C106.047348,25.193129 110.421265,28.967169 108.367012,38.255852 
+	C107.534088,42.022087 108.582603,44.556019 109.925819,47.913025 
+	C112.328690,53.918343 114.320885,60.530357 114.431374,66.924240 
+	C114.716957,83.450493 105.241493,93.403374 91.397430,98.327446 
+	C91.672081,104.487572 92.090355,110.161812 92.113274,115.837631 
+	C92.126060,119.007751 91.010536,122.205605 87.119865,121.993538 
+	C83.169823,121.778236 82.863762,118.443222 82.866119,114.839363 
+z"/>
+</svg>

From 7029d5af6bc68ab9ab38ca7c3afbd8ea05642a7a Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Thu, 17 Sep 2026 15:41:59 -0700
Subject: [PATCH 2/2] fix(doc): keep community links on mobile and cache a
 complete pair

GitHub and Discord stay in socialLinks so the mobile overlay still has
them. The desktop navbar hides those two stock icons because Community.vue
already shows them with counts. Cache the stats pair only when both
fetches succeed so a missing metric is retried.

Co-Authored-By: grok-4.6 <grok-4.6@x.ai>
---
 doc/.vitepress/config.ts           | 8 ++++++--
 doc/.vitepress/theme/Community.vue | 5 +++--
 doc/.vitepress/theme/custom.css    | 8 ++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/doc/.vitepress/config.ts b/doc/.vitepress/config.ts
index 613e7df4ad..7a6b76a0f6 100644
--- a/doc/.vitepress/config.ts
+++ b/doc/.vitepress/config.ts
@@ -193,9 +193,13 @@ export default defineConfig({
 			],
 		},
 
-		// GitHub and Discord are rendered by theme/Community.vue instead, with
-		// live counts and the hand-drawn icons from moq.dev.
+		// GitHub and Discord stay here so the mobile overlay still has them.
+		// theme/Community.vue is the desktop pair, with live counts and the
+		// hand-drawn icons from moq.dev; custom.css hides these two in the
+		// navbar so they do not duplicate.
 		socialLinks: [
+			{ icon: "github", link: "https://github.com/moq-dev/moq" },
+			{ icon: "discord", link: "https://discord.gg/FCYF3p99mr" },
 			{ icon: "x", link: "https://x.com/kixelated" },
 			{ icon: "bluesky", link: "https://bsky.app/profile/kixel.me" },
 			{ icon: "linkedin", link: "https://www.linkedin.com/in/luke-curley-635a457/" },
diff --git a/doc/.vitepress/theme/Community.vue b/doc/.vitepress/theme/Community.vue
index 7115669bd4..2dd8b312d4 100644
--- a/doc/.vitepress/theme/Community.vue
+++ b/doc/.vitepress/theme/Community.vue
@@ -1,7 +1,8 @@
 <script setup>
 /**
  * GitHub stars and Discord members in the navbar, with the hand-drawn icons
- * from moq.dev in place of VitePress's stock social links.
+ * from moq.dev. Hidden below 768px; the stock socialLinks keep GitHub and
+ * Discord reachable in the mobile overlay.
  *
  * The counts are fetched in the browser because the site is static and only
  * rebuilt on deploy. Both APIs allow anonymous CORS requests; GitHub's limit is
@@ -53,7 +54,7 @@ onMounted(async () => {
 			fetchNumber(DISCORD, "approximate_member_count"),
 		]);
 		stats = { stars: s, chatters: c };
-		if (s !== undefined || c !== undefined) writeCache(stats);
+		if (s !== undefined && c !== undefined) writeCache(stats);
 	}
 	stars.value = stats.stars;
 	chatters.value = stats.chatters;
diff --git a/doc/.vitepress/theme/custom.css b/doc/.vitepress/theme/custom.css
index 04bab82fb4..80986a4c5c 100644
--- a/doc/.vitepress/theme/custom.css
+++ b/doc/.vitepress/theme/custom.css
@@ -130,6 +130,14 @@
 	border-bottom-color: #334155;
 }
 
+/* Community.vue is the GitHub/Discord pair in the desktop navbar. Keep the
+   stock entries so the mobile overlay still has those links, and hide the
+   duplicates here (VPNavBarExtra is also inside VPNavBar). */
+.VPNavBar .VPSocialLink[href="https://github.com/moq-dev/moq"],
+.VPNavBar .VPSocialLink[href="https://discord.gg/FCYF3p99mr"] {
+	display: none;
+}
+
 /* Sidebar styling */
 .VPSidebar {
 	background-color: #0f172a;