Community section in the nav with live GitHub and Discord counts

src/components/author.astro

@@ -0,0 +1,24 @@
+---
+// The sign-off at the bottom of every post: avatar plus wherever you can find me.
+import { socials } from "@/socials";
+---
+
+<aside class="not-prose mt-12 flex items-center gap-4">
+	<img src="/blog/avatar.png" class="h-16 w-16 shrink-0 rounded-full" alt="@kixelated" />
+	<div class="flex flex-col gap-2">
+		<span class="font-bold text-slate-100">@kixelated</span>
+		<div class="flex flex-wrap items-center gap-3">
+			{
+				socials.map((social) => (
+					<a href={social.href} title={social.name} rel="me">
+						<img
+							src={`/social/${social.icon}.svg`}
+							class="h-6 w-6 transition-transform hover:-rotate-6"
+							alt={social.name}
+						/>
+					</a>
+				))
+			}
+		</div>
+	</div>
+</aside>

src/components/feature.astro

@@ -6,29 +6,39 @@ type Feature =
 	| "scale"
 	| "native"
 	| "discover"
-	| "efficient";
+	| "efficient"
+	| "distribution"
+	| "contribution"
+	| "robotics"
+	| "conferencing";
 
 interface Props {
 	icon: Feature;
 }
 
 const { icon } = Astro.props;
 
-// These are Kixel's original hand-drawn icons from moq.pro.
+// The first set are Kixel's original hand-drawn icons from moq.pro. The
+// use-case icons in public/home/use-case/ are placeholders waiting on
+// hand-drawn versions, same as public/social/.
 const artwork: Record<Feature, string> = {
-	source: "box",
-	web: "globe",
-	realtime: "rocket",
-	scale: "stonk",
-	native: "puzzle",
-	discover: "link",
-	efficient: "battery",
+	source: "https://moq.pro/icons/box.svg",
+	web: "https://moq.pro/icons/globe.svg",
+	realtime: "https://moq.pro/icons/rocket.svg",
+	scale: "https://moq.pro/icons/stonk.svg",
+	native: "https://moq.pro/icons/puzzle.svg",
+	discover: "https://moq.pro/icons/link.svg",
+	efficient: "https://moq.pro/icons/battery.svg",
+	distribution: "/home/use-case/distribution.svg",
+	contribution: "/home/use-case/contribution.svg",
+	robotics: "/home/use-case/robotics.svg",
+	conferencing: "/home/use-case/conferencing.svg",
 };
 ---
 
 <li class="flex items-start gap-3">
 	<span class="mt-0.5 flex h-9 w-11 shrink-0 items-center justify-center" aria-hidden="true">
-		<img src={`https://moq.pro/icons/${artwork[icon]}.svg`} class="h-9 w-11 object-contain" alt="" />
+		<img src={artwork[icon]} class="h-9 w-11 object-contain" alt="" />
 	</span>
 	<span><slot /></span>
 </li>

src/components/nav-link.astro

@@ -0,0 +1,22 @@
+---
+// One entry in the sidebar: a hand-drawn icon that wiggles on hover, the
+// matching hand-drawn word, and optionally a line of small print underneath.
+// Both images live in public/layout/ as <icon>-icon.svg and <icon>-word.svg.
+interface Props {
+	href: string;
+	icon: string;
+	word: string;
+}
+
+const { href, icon, word } = Astro.props;
+---
+
+<a href={href} class="group flex items-center gap-2 w-32">
+	<span class="flex w-9 justify-center shrink-0">
+		<img src={`/layout/${icon}-icon.svg`} class="h-9 transition-transform group-hover:-rotate-6" alt="" />
+	</span>
+	<span class="flex flex-col items-start">
+		<img src={`/layout/${icon}-word.svg`} class="h-9 w-auto" alt={word} />
+		<slot />
+	</span>
+</a>

src/layouts/global.astro

@@ -3,6 +3,7 @@ import "./global.css";
 // Imported after global.css so the theme's .hljs-* color rules land later in
 // the cascade and beat the prose plugin's .markdown :where(pre code) { color: inherit }.
 import "highlight.js/styles/atom-one-dark.css";
+import NavLink from "@/components/nav-link.astro";
 
 // NOTE: This is magically used as the type for Astro.props
 interface Props {
@@ -76,42 +77,19 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
 					</a>
 				</div>
 				<div class="flex md:flex-col flex-row flex-wrap items-center justify-center gap-4 md:w-32 w-1/2">
-					<a href="/demo" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/demo-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/demo-word.svg" class="h-9 w-auto" alt="Demo" />
-					</a>
-					<a href="/blog" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/blog-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/blog-word.svg" class="h-9 w-auto" alt="Blog" />
-					</a>
-					<a href="https://doc.moq.dev" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/docs-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/docs-word.svg" class="h-9 w-auto" alt="Docs" />
-					</a>
-					<a href="https://github.com/moq-dev/moq" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/github-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/github-word.svg" class="h-9 w-auto" alt="GitHub" />
-					</a>
-					<a href="https://discord.moq.dev" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/discord-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/discord-word.svg" class="h-9 w-auto" alt="Discord" />
-					</a>
-					<a href={proUrl} class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/pro-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/pro.svg" class="h-9 w-auto" alt="Pro" />
-					</a>
+					<NavLink href="/demo" icon="demo" word="Demo" />
+					<NavLink href="/blog" icon="blog" word="Blog" />
+					<NavLink href="https://doc.moq.dev" icon="docs" word="Docs" />
+					<NavLink href={proUrl} icon="pro" word="Pro" />
+
+					<img src="/layout/underline.svg" class="hidden md:block w-32" alt="" />
+
+					<NavLink href="https://github.com/moq-dev/moq" icon="github" word="GitHub">
+						<span data-stat="stars" class="text-xs font-bold text-green-500 -mt-1 whitespace-nowrap"></span>
+					</NavLink>
+					<NavLink href="https://discord.moq.dev" icon="discord" word="Discord">
+						<span data-stat="chatters" class="text-xs font-bold text-green-500 -mt-1 whitespace-nowrap"></span>
+					</NavLink>
 				</div>
 			</nav>
 			<article class="markdown p-4 flex-1 min-w-0">
@@ -127,3 +105,9 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
 		</div>
 	</body>
 </html>
+
+<script>
+	import { renderStats } from "@/stats";
+
+	renderStats();
+</script>

src/pages/blog/application-first.mdx

@@ -7,6 +7,8 @@ cover: "/blog/application-first/sun.png"
 date: 2025-05-02
 ---
 
+import Author from "@/components/author.astro";
+
 # Application First
 Today was my last day at Discord.
 It's a great company with a great product and great people.
@@ -210,4 +212,4 @@ I'm down to scheme too if any companies have a partnership in mind.
 
 Hoping to have a public demo in 3-6 months.
 
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/be-the-outlier.mdx

@@ -7,6 +7,8 @@ cover: "/blog/be-the-outlier/narwhal.png"
 date: 2025-06-07
 ---
 
+import Author from "@/components/author.astro";
+
 # Your Job Now: Be The Outlier
 
 I've been [working on a startup](/blog/application-first) for the last month.
@@ -97,4 +99,4 @@ What does this have to do with Media over QUIC?
 I would set up a personal blog but I'm too busy right now.
 Hope you enjoyed something different like comment subscribe.
 
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/cars2.mdx

@@ -7,6 +7,8 @@ cover: "/blog/cars2/queen.png"
 date: 2026-07-14
 ---
 
+import Author from "@/components/author.astro";
+
 # A Modern Interpretation of Live Streaming in the Cars 2 Cinematic Universe
 sup
 
@@ -226,5 +228,4 @@ No refunds.
 
 If you're interested in more Cars 2 lore, join the [fan club](https://discord.gg/FCYF3p99mr) or email me at `me@kixel.me`.
 
-Written by [@kixelated](mailto:meself@kixel.me).
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/demoqed.mdx

@@ -6,6 +6,9 @@ description: The first MoQ conference coming soon (October) in San-Fran-cis-co.
 cover: "/blog/demoqed/demoqed.png"
 date: 2026-08-25
 ---
+
+import Author from "@/components/author.astro";
+
 # DE MOQ ED
 
 [Demuxed](https://www.demuxed.com/) is the best media conference.
@@ -80,5 +83,4 @@ Ur welcome.
 If the thought of flying to San Francisco for a half-day conference sounds lame, you can make it lamer and [schedule a coffee](http://meet.kixel.me/) with me.
 One lucky guest could even stay in my unfinished ~murder~ basement.
 
-Written by [@kixelated](mailto:meself@kixel.me).
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/distribution-at-twitch.mdx

@@ -7,6 +7,8 @@ cover: "/blog/kixelCat.png"
 date: 2022-02-15
 ---
 
+import Author from "@/components/author.astro";
+
 # Source
 
 [This document](https://docs.google.com/document/d/1OTnJunbpSJchdj8XI3GU9Fo-RUUFBqLO1AhlaKk5Alo/edit?usp=sharing) was originally shared on [MoQ IETF mailing list](https://mailarchive.ietf.org/arch/msg/moq/3-9tqDmEuzij7Iz3Xf7kIsR1ZYo/).
@@ -263,4 +265,4 @@ Prioritization is used to avoid segments fighting for bandwidth, delivering newe
 
 -   **(new)** UDP delivery is more expensive than TCP in practice
 
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/first-app.mdx

@@ -7,6 +7,8 @@ cover: "/blog/first-app/demo.png"
 date: 2025-08-22
 ---
 
+import Author from "@/components/author.astro";
+
 # The First MoQ App: hang.live
 🚨 It's finally happening! 🚨
 
@@ -116,5 +118,4 @@ I'm totally open to suggestions and contributions.
 *Especially* if you're in the San Francisco area and want to vibe.
 [Hit me up](https://discord.moq.dev).
 
-Written by [@kixelated](https://github.com/kixelated).
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/first-cdn.mdx

@@ -7,6 +7,8 @@ cover: "/blog/first-cdn/cloudflare.png"
 date: 2025-08-22
 ---
 
+import Author from "@/components/author.astro";
+
 # The First MoQ CDN: Cloudflare
 🚨 It's finally happening! 🚨
 
@@ -162,8 +164,7 @@ Somehow there's 900+ people in there.
 Ping me and I will do whatever I can to help.
 *Especially* if it means putting one more nail in the WebRTC coffin.
 
-Written by [@kixelated](https://github.com/kixelated).
-![@kixelated](/blog/avatar.png)
+<Author />
 
 ## Javascript is an Abomination
 Still reading?

src/pages/blog/forward-error-correction.mdx

@@ -7,6 +7,8 @@ cover: "/blog/forward-error-correction/mfw.jpeg"
 date: 2024-02-17
 ---
 
+import Author from "@/components/author.astro";
+
 # Forward? Error? Correction?
 
 So I absolutely _dunked_ on datagrams in the [last blog post](/blog/never-use-datagrams).
@@ -192,6 +194,4 @@ Do what works best for your users at whatever layer you control.
 
 Just please, never show me a graph based on random packet loss again.
 
-Written by [@kixelated](https://github.com/kixelated).
-
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/hash-tag-community.mdx

@@ -7,6 +7,8 @@ cover: "/blog/hash-tag-community/hash.png"
 date: 2025-12-20
 ---
 
+import Author from "@/components/author.astro";
+
 # Hash Tag Community
 There's been a LOT of new contributions to the project thanks primarily to the [Montevideo Tech Summer Camp](/blog/monte-video).
 It is my job as the official MoQ `#influencer` to give everyone a shoutout.
@@ -190,5 +192,4 @@ This project is my legacy, and I greatly appreciate all of the help from the `#c
 Just a reminder that I'm unemployed (on purpose) and available for *unpaid* consulting gigs if you, or your megacorp, are interested in MoQ.
 Message me on [Discord](https://discord.moq.dev) if you, or your CTO, or your intern, want to schedule a call and exchange business cards.
 
-Written by [@kixelated](https://github.com/kixelated).
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/monte-video.mdx

@@ -7,6 +7,8 @@ cover: "/blog/monte-video/uruguay.png"
 date: 2025-11-11
 ---
 
+import Author from "@/components/author.astro";
+
 # Monte\<video\>: A Real Place
 Who knew?
 
@@ -106,6 +108,5 @@ They literally invite you to visit their home.
 
 I had a blast last year and (hopefully) I'll see you there this year.
 
-Written by [@kixelated](https://github.com/kixelated).
-![@kixelated](/blog/avatar.png)
+<Author />
 

src/pages/blog/moq-boy.mdx

@@ -7,6 +7,7 @@ cover: "/blog/moq-boy/moqboy.png"
 date: 2026-04-16
 ---
 import Boy from "@/components/boy.astro";
+import Author from "@/components/author.astro";
 
 <center>
 	<img src="/demo/moqboy.svg" class="h-40" alt="MoQ Boy" />
@@ -206,5 +207,4 @@ Email me at `me@kixel.me`, or DM on [Discord](https://discord.moq.dev) if you wa
 - to sponsor some open source contributions.
 - a MoQ pilot to replace your crummy setup.
 
-Written by [@kixelated](https://github.com/kixelated).
-![@kixelated](/blog/avatar.png)
+<Author />

src/pages/blog/moq-onion.mdx

@@ -7,6 +7,8 @@ cover: "/blog/moq-onion/onion.png"
 date: 2024-11-17
 ---
 
+import Author from "@/components/author.astro";
+
 # The MoQ Onion
 Today we slice the onion.
 The most critical, and least documented, thing to understand is the layering behind MoQ.
@@ -335,6 +337,4 @@ I'm sure this blog post is already out of date.
 
 [Join the conversation](https://discord.moq.dev) and evolve with me, platonically of course.
 
-Written by [@kixelated](https://github.com/kixelated).
-
-![@kixelated](/blog/avatar.png)
+<Author />