feat(website): GitHub stars beside the download, GitHub in the phone navbar

website/docusaurus.config.ts

@@ -672,6 +672,8 @@ export default async function createConfig(): Promise<Config> {
 					{
 						type: "html",
 						position: "right",
+						// Kept in the bar on phones, where it replaces Downloads (custom.css).
+						className: "navbar-github-item",
 						value:
 							`<a class="navbar-github-link" href="${REPO_URL}" target="_blank" rel="noopener">` +
 							// GitHub's own mark (Octicons `mark-github`), not a generic code glyph: the item

website/i18n/code.source.json

@@ -49,6 +49,7 @@
   "home.hero.kicker": "Open-source screen recorder",
   "home.hero.title": "Beautiful demos on the first take.",
   "home.hero.tagline": "Automatic zooms, smooth cursor movement, and a frame that looks finished. Record, adjust, share.",
+  "home.hero.stars": "{count} stars on GitHub",
   "home.hero.reassurance": "Free and open source. No watermark. No account.",
   "home.features.platforms.title": "Windows, macOS, Linux",
   "home.agents.kicker": "For AI agents",
@@ -119,8 +120,6 @@
   "demoLoop.title.simpler-editor": "The OpenScreen editor",
   "demoLoop.title.edit-like-a-doc": "Editing a video like a document",
   "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit",
-  "editor.skipLink": "Skip the editor — go to downloads",
-  "editor.title": "Five things you will actually do",
   "films.default.kicker": "Out of the box",
   "films.default.title": "Good-looking from the first take.",
   "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.",
@@ -170,12 +169,6 @@
   "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.",
   "films.ship.blur.t": "Blur regions.",
   "films.label": "More of the app, in motion",
-  "download.cta.mac": "Download for Mac",
-  "download.cta.windows": "Download for Windows",
-  "download.cta.linux": "Download for Linux",
-  "home.hero.download": "Download",
-  "download.cta.chooseMac": "Choose your Mac",
-  "download.cta.otherVersions": "Other versions",
   "recreation.style.kicker": "Style",
   "recreation.style.title": "Swap the background",
   "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
@@ -194,8 +187,12 @@
   "recreation.pause": "Pause animation",
   "recreation.play": "Play animation",
   "home.hero.explore": "Scroll to explore the editor",
-  "announcement.v2.link": "See what's new",
-  "announcement.v2.title": "OpenScreen v2 is here",
+  "download.cta.mac": "Download for Mac",
+  "download.cta.windows": "Download for Windows",
+  "download.cta.linux": "Download for Linux",
+  "home.hero.download": "Download",
+  "download.cta.chooseMac": "Choose your Mac",
+  "download.cta.otherVersions": "Other versions",
   "announcement.productHunt.rank": "#5 Product of the Day",
   "showcase.record.kicker": "record",
   "showcase.record.claim": "It records with the operating system, not around it.",
@@ -222,6 +219,8 @@
   "showcase.agent.link.docs": "AI editing docs",
   "showcase.agent.link.feature": "How automatic zooms work",
   "showcase.title": "Recorder, captions, agent, encoder.",
+  "editor.skipLink": "Skip the editor — go to downloads",
+  "editor.title": "Five things you will actually do",
   "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
   "footer.product.title": "Product",
   "footer.product.download": "Download",

website/i18n/de/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "Animation abspielen"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 ist da"
-  },
-  "announcement.v2.link": {
-    "message": "Die Neuerungen (auf Englisch)",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "Für Mac herunterladen"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "Prompt kopieren"
+  },
+  "home.hero.stars": {
+    "message": "{count} Sterne auf GitHub"
   }
 }

website/i18n/es/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "Reproducir la animación"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 ya está aquí"
-  },
-  "announcement.v2.link": {
-    "message": "Ver las novedades (en inglés)",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "Descargar para Mac"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "Copiar el prompt"
+  },
+  "home.hero.stars": {
+    "message": "{count} estrellas en GitHub"
   }
 }

website/i18n/fr/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "Lire l’animation"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 est là"
-  },
-  "announcement.v2.link": {
-    "message": "Les nouveautés (en anglais)",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "Télécharger pour Mac"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "Copier le prompt"
+  },
+  "home.hero.stars": {
+    "message": "{count} étoiles sur GitHub"
   }
 }

website/i18n/ja/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "アニメーションを再生"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2が登場"
-  },
-  "announcement.v2.link": {
-    "message": "新機能を見る（英語）",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "Mac用をダウンロード"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "プロンプトをコピー"
+  },
+  "home.hero.stars": {
+    "message": "GitHub で {count} スター"
   }
 }

website/i18n/pt-BR/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "Reproduzir animação"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 chegou"
-  },
-  "announcement.v2.link": {
-    "message": "Veja as novidades (em inglês)",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "Baixar para Mac"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "Copiar o prompt"
+  },
+  "home.hero.stars": {
+    "message": "{count} estrelas no GitHub"
   }
 }

website/i18n/zh-CN/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "播放动画"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 来了"
-  },
-  "announcement.v2.link": {
-    "message": "了解新功能（英语）",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "下载 Mac 版"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "复制提示词"
+  },
+  "home.hero.stars": {
+    "message": "GitHub 上 {count} 颗星"
   }
 }

website/i18n/zh-TW/code.json

@@ -1066,13 +1066,6 @@
   "recreation.play": {
     "message": "播放動畫"
   },
-  "announcement.v2.title": {
-    "message": "OpenScreen v2 登場"
-  },
-  "announcement.v2.link": {
-    "message": "了解新功能（英文）",
-    "description": "Links to an English-only blog post. Mention English in translated labels."
-  },
   "download.cta.mac": {
     "message": "下載 Mac 版"
   },
@@ -1134,5 +1127,8 @@
   },
   "home.hero.agentBadge.copy": {
     "message": "複製提示詞"
+  },
+  "home.hero.stars": {
+    "message": "GitHub 上 {count} 顆星"
   }
 }

website/src/components/ReleaseBadge/index.tsx

@@ -1,31 +1,12 @@
-import Translate, { translate } from "@docusaurus/Translate";
-import { ArrowRight } from "lucide-react";
+import Translate from "@docusaurus/Translate";
 
-import LocaleLink from "../LocaleLink";
 import styles from "./styles.module.css";
 
-export default function ReleaseBadge() {
-	return (
-		<LocaleLink
-			className={styles.badge}
-			to="/blog/2026/09/27/making-of-v2-a-demo-is-never-ugly/"
-			title={translate({
-				id: "announcement.v2.link",
-				message: "See what's new",
-				description: "Links to an English-only blog post. Mention English in translated labels.",
-			})}
-			data-release-announcement=""
-		>
-			<span className={styles.dot} aria-hidden="true" />
-			<Translate id="announcement.v2.title">OpenScreen v2 is here</Translate>
-			<ArrowRight size={14} aria-hidden="true" />
-		</LocaleLink>
-	);
-}
-
-// The launch's Product Hunt rank, in the same pill. Product Hunt's own embed is a white
-// 250x54 card that outshone the download button beside it. The fill is Product Hunt's
-// brand colour: the mark is theirs, not a theme colour.
+/**
+ * The launch's Product Hunt rank, as a hero pill. Product Hunt's own embed is a white
+ * 250x54 card that outshone the download button beside it. The fill is Product Hunt's
+ * brand colour: the mark is theirs, not a theme colour.
+ */
 export function ProductHuntBadge() {
 	return (
 		<a

website/src/components/ReleaseBadge/styles.module.css

@@ -29,15 +29,6 @@
 	outline-offset: 4px;
 }
 
-.dot {
-	flex-shrink: 0;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--os-accent);
-	box-shadow: 0 0 10px var(--os-accent-ring);
-}
-
 .badge svg {
 	flex-shrink: 0;
 	color: var(--os-accent);

website/src/css/custom.css

@@ -440,6 +440,19 @@ body {
 	}
 }
 
+/* On a phone or tablet nothing installs, so the bar offers GitHub instead of Downloads:
+   starring is the one useful action there. Keyed on a touch-only pointer, not on width,
+   so a narrow desktop window keeps its Downloads button. Both stay in the drawer. */
+@media (max-width: 996px) and (hover: none) and (pointer: coarse) {
+	.navbar__items--right .navbar-download-cta {
+		display: none;
+	}
+
+	.navbar__items--right .navbar-github-item {
+		display: flex;
+	}
+}
+
 /* ---- footer ---- */
 
 .footer {

website/src/pages/index.module.css

@@ -64,6 +64,31 @@
 	color: var(--os-fg-2);
 }
 
+/* Same size and tone as the sentence it leads, so it reads as evidence, not a second CTA. */
+.stars {
+	color: inherit;
+	border-bottom: 1px dotted var(--os-border-hi);
+}
+
+/* Inline, not flex: the link has to share the sentence's baseline when it wraps. */
+.stars svg {
+	margin-right: 5px;
+	vertical-align: -2px;
+	fill: #f5c542;
+	stroke: #f5c542;
+}
+
+.stars strong {
+	color: var(--os-fg);
+	font-variant-numeric: tabular-nums;
+}
+
+.stars:hover {
+	color: var(--os-fg);
+	text-decoration: none;
+	border-bottom-color: var(--os-fg-2);
+}
+
 /* The download and the demo badge share one size: equal columns as wide as the wider one,
    centred by .heroCopy's text-align. */
 .actions {