From 7b8c1c3afe62467777820576743a6d681ee43dd4 Mon Sep 17 00:00:00 2001
From: hippietrail <hippytrail@gmail.com>
Date: Sun, 31 May 2026 19:02:57 +0800
Subject: [PATCH 1/3] feat: add current version numbers for firefox, js, rust,
 and vscode

---
 packages/web/src/lib/marketing/data.ts     |  1 +
 packages/web/src/lib/marketing/versions.ts | 69 ++++++++++++++++++++++
 packages/web/src/routes/+page.svelte       | 16 ++++-
 packages/web/src/routes/get/+page.svelte   | 34 ++++++++---
 4 files changed, 112 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/src/lib/marketing/versions.ts

diff --git a/packages/web/src/lib/marketing/data.ts b/packages/web/src/lib/marketing/data.ts
index d7b0016d8..0ccd69c3d 100644
--- a/packages/web/src/lib/marketing/data.ts
+++ b/packages/web/src/lib/marketing/data.ts
@@ -17,6 +17,7 @@ export type Integration = {
 	categoryLabel: string;
 	tag?: string;
 	platform?: string;
+	version?: string;
 	cta: 'install' | 'docs';
 	color?: string;
 	fg?: string;
diff --git a/packages/web/src/lib/marketing/versions.ts b/packages/web/src/lib/marketing/versions.ts
new file mode 100644
index 000000000..6aa0e339e
--- /dev/null
+++ b/packages/web/src/lib/marketing/versions.ts
@@ -0,0 +1,69 @@
+import { writable } from 'svelte/store';
+
+export const liveVersions = writable<Record<string, string>>({
+	firefox: '',
+	js: '',
+	rust: '',
+	vscode: '',
+});
+
+export async function loadLiveVersions() {
+	// 4. Firefox Addon
+	try {
+		const ver = (
+			await (
+				await fetch(
+					'https://addons.mozilla.org/api/v5/addons/addon/private-grammar-checker-harper/',
+				)
+			).json()
+		).current_version.version;
+		liveVersions.update((v) => ({ ...v, firefox: ver }));
+	} catch {}
+
+	// 2. JS Package
+	try {
+		const ver = (await (await fetch('https://registry.npmjs.org/harper.js')).json())['dist-tags']
+			.latest;
+		liveVersions.update((v) => ({ ...v, js: ver }));
+	} catch {}
+
+	// 1. Rust Crate
+	try {
+		const lines = (await (await fetch('https://index.crates.io/ha/rp/harper-core')).text()).split(
+			'\n',
+		);
+		liveVersions.update((v) => ({ ...v, rust: JSON.parse(lines[lines.length - 2]).vers }));
+	} catch {}
+
+	// 3. VS Code Extension
+	try {
+		const res = await fetch(
+			'https://marketplace.visualstudio.com/_apis/public/gallery/extensionquery',
+			{
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Accept: 'application/json;api-version=3.0-preview.1',
+				},
+				body: JSON.stringify({
+					filters: [
+						{
+							criteria: [
+								{ filterType: 8, value: 'Microsoft.VisualStudio.Code' },
+								{ filterType: 7, value: 'elijah-potter.harper' },
+							],
+							pageNumber: 1,
+							pageSize: 1,
+							sortBy: 0,
+							sortOrder: 0,
+						},
+					],
+					assetTypes: [],
+					flags: 194,
+				}),
+			},
+		);
+		const ver = (await res.json()).results[0].extensions[0].versions[0].version;
+		liveVersions.update((v) => ({ ...v, vscode: ver }));
+	} catch {}
+}
diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte
index 6ed79b9ef..867c3e60b 100644
--- a/packages/web/src/routes/+page.svelte
+++ b/packages/web/src/routes/+page.svelte
@@ -19,6 +19,7 @@ import PrivacySpeedCards from '$lib/marketing/PrivacySpeedCards.svelte';
 import { featuredIntegrationIds, integrations, marketingLinks } from '$lib/marketing/data';
 import { LazyEditor } from 'harper-editor';
 import type { Linter } from 'harper.js';
+import { loadLiveVersions, liveVersions } from '$lib/marketing/versions';
 import { onMount } from 'svelte';
 import demoText from '../../../../demo.md?raw';
 
@@ -141,10 +142,17 @@ const faqs = [
 	},
 ];
 
+let liveFxVer = '';
+let liveJsVer = '';
+let liveRustVer = '';
+let liveVscodeVer = '';
+
 onMount(() => {
 	void (async () => {
 		linter = await createEditorLinter();
 	})();
+
+    void loadLiveVersions();
 });
 
 </script>
@@ -247,7 +255,13 @@ onMount(() => {
 							<IntegrationTile {integration} size={32} />
 							<span class="flex min-w-0 flex-col">
 								<strong class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.84rem]">{integration.name}</strong>
-								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.72rem] text-[#807a6e] dark:text-white/55">{integration.desc}</small>
+								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.72rem] text-[#807a6e] dark:text-white/55">
+									{integration.desc}
+
+									{#if $liveVersions[integration.id]}
+										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+									{/if}
+								</small>
 							</span>
 						</a>
 					{/if}
diff --git a/packages/web/src/routes/get/+page.svelte b/packages/web/src/routes/get/+page.svelte
index 20c98b718..007ccb8e9 100644
--- a/packages/web/src/routes/get/+page.svelte
+++ b/packages/web/src/routes/get/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { onMount } from 'svelte';
 import {
 	type Integration,
 	integrationCategories,
@@ -8,10 +9,15 @@ import {
 import IntegrationTile from '$lib/marketing/IntegrationTile.svelte';
 import MarketingFooter from '$lib/marketing/MarketingFooter.svelte';
 import MarketingHeader from '$lib/marketing/MarketingHeader.svelte';
+import { liveVersions, loadLiveVersions } from '$lib/marketing/versions';
 
 let activeCategory = 'all';
 let query = '';
 
+onMount(() => {
+	void loadLiveVersions();
+});
+
 $: filtered = integrations.filter((integration) => {
 	if (activeCategory === 'community' && !integration.community) {
 		return false;
@@ -78,7 +84,14 @@ function clearFilters() {
 							<IntegrationTile {integration} size={40} />
 							<span class="flex min-w-0 flex-col">
 								<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
-								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">{integration.desc}</small>
+								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
+									{integration.desc}
+									{#if $liveVersions[integration.id]}
+										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+									{:else if $liveVersions[integration.name]}
+										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.name]})</span>
+									{/if}
+								</small>
 							</span>
 							<em class="whitespace-nowrap text-[0.78rem] font-extrabold text-[#b06a1b] not-italic dark:text-primary-300">{ctaLabel(integration)} →</em>
 						</a>
@@ -168,12 +181,19 @@ function clearFilters() {
 							class="grid grid-cols-[2.5rem_1fr_auto] items-center gap-[0.9rem] rounded-xl border-[0.5px] border-[rgba(28,26,22,0.1)] bg-white px-[1.1rem] py-[0.9rem] !text-[#1c1a16] no-underline transition-[transform,box-shadow,border-color] duration-150 hover:-translate-y-px hover:border-[#b06a1b] hover:shadow-[0_10px_24px_-16px_rgba(28,26,22,0.16)] hover:no-underline dark:border-white/10 dark:bg-white/5 dark:!text-white dark:hover:border-primary-300 max-[640px]:grid-cols-[2.5rem_1fr] [&_em]:max-[640px]:col-start-2"
 							href={integration.href}
 						>
-							<IntegrationTile {integration} size={40} />
-							<span class="flex min-w-0 flex-col">
-								<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
-								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">{integration.platform}</small>
-							</span>
-							<em class="whitespace-nowrap text-[0.78rem] font-extrabold text-[#b06a1b] not-italic dark:text-primary-300">{ctaLabel(integration)} →</em>
+						<IntegrationTile {integration} size={40} />
+						<span class="flex min-w-0 flex-col">
+							<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
+							<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
+								{integration.platform}
+								{#if $liveVersions[integration.id]}
+									<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+								{:else if $liveVersions[integration.name]}
+									<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.name]})</span>
+								{/if}
+							</small>
+						</span>
+						<em class="whitespace-nowrap text-[0.78rem] font-extrabold text-[#b06a1b] not-italic dark:text-primary-300">{ctaLabel(integration)} →</em>
 						</a>
 					{/each}
 				{/if}

From ca8089401090845c7c188fd5f388196ff8a72797 Mon Sep 17 00:00:00 2001
From: hippietrail <hippytrail@gmail.com>
Date: Sun, 31 May 2026 19:42:38 +0800
Subject: [PATCH 2/3] chore: tweak formatting

---
 packages/web/src/lib/marketing/data.ts   |  2 +-
 packages/web/src/routes/+page.svelte     | 13 ++++++----
 packages/web/src/routes/get/+page.svelte | 32 ++++++++++++++++--------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/lib/marketing/data.ts b/packages/web/src/lib/marketing/data.ts
index 0ccd69c3d..8f3f7c580 100644
--- a/packages/web/src/lib/marketing/data.ts
+++ b/packages/web/src/lib/marketing/data.ts
@@ -107,7 +107,7 @@ export const integrationCategories: IntegrationCategory[] = [
 		items: [
 			{
 				id: 'vscode',
-				name: 'Visual Studio Code',
+				name: 'VS Code',
 				desc: 'Marketplace extension.',
 				href: marketingLinks.vscode,
 				platform: 'VS Code, Cursor',
diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte
index 867c3e60b..99eeae800 100644
--- a/packages/web/src/routes/+page.svelte
+++ b/packages/web/src/routes/+page.svelte
@@ -254,13 +254,16 @@ onMount(() => {
 						>
 							<IntegrationTile {integration} size={32} />
 							<span class="flex min-w-0 flex-col">
-								<strong class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.84rem]">{integration.name}</strong>
-								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.72rem] text-[#807a6e] dark:text-white/55">
-									{integration.desc}
-
+								<div class="flex items-center gap-1.5 overflow-hidden">
+									<strong class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.84rem]">{integration.name}</strong>
 									{#if $liveVersions[integration.id]}
-										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+										<span class="inline-flex items-center rounded-full bg-[#f4f1ea] dark:bg-white/10 px-1.5 py-0.5 text-[0.65rem] font-mono font-medium text-[#6b6455] dark:text-white/80 border border-[#e4dfd3] dark:border-white/10 select-none">
+											v{$liveVersions[integration.id]}
+										</span>
 									{/if}
+								</div>
+								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.72rem] text-[#807a6e] dark:text-white/55">
+									{integration.desc}
 								</small>
 							</span>
 						</a>
diff --git a/packages/web/src/routes/get/+page.svelte b/packages/web/src/routes/get/+page.svelte
index 007ccb8e9..7aecff06f 100644
--- a/packages/web/src/routes/get/+page.svelte
+++ b/packages/web/src/routes/get/+page.svelte
@@ -83,14 +83,20 @@ function clearFilters() {
 						>
 							<IntegrationTile {integration} size={40} />
 							<span class="flex min-w-0 flex-col">
-								<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
-								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
-									{integration.desc}
+								<div class="flex items-center gap-1.5">
+									<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
 									{#if $liveVersions[integration.id]}
-										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+										<span class="inline-flex items-center rounded-full bg-[#f4f1ea] dark:bg-white/10 px-1.5 py-0.5 text-[0.68rem] font-mono font-medium text-[#6b6455] dark:text-white/80 border border-[#e4dfd3] dark:border-white/10 select-none">
+											{$liveVersions[integration.id]}
+										</span>
 									{:else if $liveVersions[integration.name]}
-										<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.name]})</span>
+										<span class="inline-flex items-center rounded-full bg-[#f4f1ea] dark:bg-white/10 px-1.5 py-0.5 text-[0.68rem] font-mono font-medium text-[#6b6455] dark:text-white/80 border border-[#e4dfd3] dark:border-white/10 select-none">
+											{$liveVersions[integration.name]}
+										</span>
 									{/if}
+								</div>
+								<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
+									{integration.desc}
 								</small>
 							</span>
 							<em class="whitespace-nowrap text-[0.78rem] font-extrabold text-[#b06a1b] not-italic dark:text-primary-300">{ctaLabel(integration)} →</em>
@@ -183,14 +189,20 @@ function clearFilters() {
 						>
 						<IntegrationTile {integration} size={40} />
 						<span class="flex min-w-0 flex-col">
-							<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
-							<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
-								{integration.platform}
+							<div class="flex items-center gap-1.5">
+								<strong class="text-[0.94rem] leading-[1.25]">{integration.name}</strong>
 								{#if $liveVersions[integration.id]}
-									<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.id]})</span>
+									<span class="inline-flex items-center rounded-full bg-[#f4f1ea] dark:bg-white/10 px-1.5 py-0.5 text-[0.68rem] font-mono font-medium text-[#6b6455] dark:text-white/80 border border-[#e4dfd3] dark:border-white/10 select-none">
+										{$liveVersions[integration.id]}
+									</span>
 								{:else if $liveVersions[integration.name]}
-									<span class="opacity-75 font-mono ml-1">({$liveVersions[integration.name]})</span>
+									<span class="inline-flex items-center rounded-full bg-[#f4f1ea] dark:bg-white/10 px-1.5 py-0.5 text-[0.68rem] font-mono font-medium text-[#6b6455] dark:text-white/80 border border-[#e4dfd3] dark:border-white/10 select-none">
+										{$liveVersions[integration.name]}
+									</span>
 								{/if}
+							</div>
+							<small class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8rem] leading-[1.4] text-[#807a6e] dark:text-white/55">
+								{integration.platform}
 							</small>
 						</span>
 						<em class="whitespace-nowrap text-[0.78rem] font-extrabold text-[#b06a1b] not-italic dark:text-primary-300">{ctaLabel(integration)} →</em>

From caac7b5f7fde813e6aa7d802ec5df457f1820f11 Mon Sep 17 00:00:00 2001
From: hippietrail <hippytrail@gmail.com>
Date: Sun, 31 May 2026 19:45:04 +0800
Subject: [PATCH 3/3] fix: numbers match order

---
 packages/web/src/lib/marketing/versions.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/lib/marketing/versions.ts b/packages/web/src/lib/marketing/versions.ts
index 6aa0e339e..4599b8868 100644
--- a/packages/web/src/lib/marketing/versions.ts
+++ b/packages/web/src/lib/marketing/versions.ts
@@ -8,7 +8,7 @@ export const liveVersions = writable<Record<string, string>>({
 });
 
 export async function loadLiveVersions() {
-	// 4. Firefox Addon
+	// 1. Firefox Addon
 	try {
 		const ver = (
 			await (
@@ -27,7 +27,7 @@ export async function loadLiveVersions() {
 		liveVersions.update((v) => ({ ...v, js: ver }));
 	} catch {}
 
-	// 1. Rust Crate
+	// 3. Rust Crate
 	try {
 		const lines = (await (await fetch('https://index.crates.io/ha/rp/harper-core')).text()).split(
 			'\n',
@@ -35,7 +35,7 @@ export async function loadLiveVersions() {
 		liveVersions.update((v) => ({ ...v, rust: JSON.parse(lines[lines.length - 2]).vers }));
 	} catch {}
 
-	// 3. VS Code Extension
+	// 4. VS Code Extension
 	try {
 		const res = await fetch(
 			'https://marketplace.visualstudio.com/_apis/public/gallery/extensionquery',