feat: track dither-kit installs via a proxied /r registry route

Add a tracked `/r/{name}.json` route that proxies the dither-kit repo, rewrites
@dither-kit deps to self-referencing /r URLs (so a bare install stays
zero-config), and fires a Databuddy server event per fetch (core ~= total
installs). Lead the docs install with the tracked URL; GitHub shorthand stays as
an untracked alternative. Adds DATABUDDY_API_KEY env (optional) and restores the
/login redirect search param dropped earlier.

Author: ripgrim

.env.example

@@ -35,6 +35,10 @@ UNKEY_ROOT_KEY=
 # [optional] Autumn billing.
 AUTUMN_SECRET_KEY=
 
+# [optional] Databuddy server API key (dbdy_...) — powers registry install
+# tracking on the /r/{name}.json route. Install counting is disabled if unset.
+DATABUDDY_API_KEY=
+
 # [optional] OpenRouter — powers AI chat. Chat features are disabled if unset.
 OPENROUTER_API_KEY=
 # [optional] Model overrides. Defaults are used when unset.

apps/web/src/components/dither-kit-docs/content.ts

@@ -11,10 +11,16 @@ import type {
  * The primitives live in their own repo; only this lander stays in Tripwire. */
 export const REPO = "Boring-Software-Inc/dither-kit"
 
-/** Namespace registry URL — the dither-kit repo's `r/` served over GitHub raw,
- * for the optional `@dither-kit` components.json path. */
-export const REGISTRY_URL =
-  "https://raw.githubusercontent.com/Boring-Software-Inc/dither-kit/main/r/{name}.json"
+/** Tracked registry endpoint — Tripwire proxies the dither-kit repo and counts
+ * each fetch as an install. Leading installs with this URL is what makes the
+ * numbers real (the raw-GitHub shorthand can't be measured). Deps are rewritten
+ * to self-referencing `/r/*` URLs, so a bare install stays zero-config. */
+export const REGISTRY_BASE = "https://tripwire.sh/r"
+export const regItem = (item: string): string => `${REGISTRY_BASE}/${item}.json`
+
+/** Namespace registry URL, pointed at the tracked endpoint, for the optional
+ * `@dither-kit` components.json path. */
+export const REGISTRY_URL = `${REGISTRY_BASE}/{name}.json`
 
 /* ------------------------------------------------------- package manager */
 
@@ -38,7 +44,7 @@ export const addCmd = (pm: Pm, item: string): string =>
 export const SETUP_PROMPT = `Set up dither-kit — composable dithered charts for shadcn/ui — in this project.
 
 Install with the shadcn CLI (this also pulls the shared \`core\` engine + its deps like motion and d3):
-  npx shadcn@latest add ${REPO}/area-chart
+  npx shadcn@latest add ${regItem("area-chart")}
 
 Files land in components/dither-kit/. The API is recharts-style / children-as-config — a data array plus a config object that maps each series to a label and colour:
 
@@ -55,7 +61,7 @@ Files land in components/dither-kit/. The API is recharts-style / children-as-co
     <Area dataKey="desktop" variant="gradient" />
   </AreaChart>
 
-Other charts install the same way: bar-chart, pie-chart, radar-chart (or ${REPO}/dither-kit for all of them).
+Other charts install the same way: bar-chart, pie-chart, radar-chart (or ${regItem("dither-kit")} for all of them).
 - variant: gradient | dotted | hatched | solid
 - color: green blue purple pink orange red grey
 - bloom: off | low | high | aura

apps/web/src/components/dither-kit-docs/sections.tsx

@@ -28,6 +28,7 @@ import {
   pieCode,
   pieConfig,
   pieData,
+  regItem,
   REGISTRY_URL,
   REPO,
   type Pm,
@@ -188,9 +189,9 @@ export function InstallSection({
           automatically
         </span>
         <div className="flex flex-col gap-1.5">
-          <CopyLine text={addCmd(pm, `${REPO}/area-chart`)} />
-          <CopyLine text={addCmd(pm, `${REPO}/pie-chart`)} />
-          <CopyLine text={addCmd(pm, `${REPO}/dither-kit`)} />
+          <CopyLine text={addCmd(pm, regItem("area-chart"))} />
+          <CopyLine text={addCmd(pm, regItem("pie-chart"))} />
+          <CopyLine text={addCmd(pm, regItem("dither-kit"))} />
         </div>
       </div>
 
@@ -210,10 +211,11 @@ export function InstallSection({
       <p className="font-mono text-[11px] leading-relaxed text-muted-foreground">
         also available: <span className="text-foreground">bar-chart</span>,{" "}
         <span className="text-foreground">radar-chart</span>, and{" "}
-        <span className="text-foreground">core</span>.{" "}
-        <span className="text-foreground">{REPO}/dither-kit</span> grabs
-        everything. files land in{" "}
-        <span className="text-foreground">components/dither-kit/</span>.
+        <span className="text-foreground">core</span> — swap the last path
+        segment. files land in{" "}
+        <span className="text-foreground">components/dither-kit/</span>. prefer
+        GitHub? <span className="text-foreground">{REPO}/area-chart</span> works
+        too.
       </p>
 
       <details className="group flex flex-col gap-2">
@@ -264,7 +266,7 @@ export function ChartGallery({
 
       <Showcase
         title="area"
-        install={addCmd(pm, `${REPO}/area-chart`)}
+        install={addCmd(pm, regItem("area-chart"))}
         code={areaCode(tweaks)}
         toolbar={<ReplayButton onClick={() => onReplay("area")} />}
       >
@@ -287,7 +289,7 @@ export function ChartGallery({
 
       <Showcase
         title="bar"
-        install={addCmd(pm, `${REPO}/bar-chart`)}
+        install={addCmd(pm, regItem("bar-chart"))}
         code={barCode(tweaks)}
         toolbar={<ReplayButton onClick={() => onReplay("bar")} />}
       >
@@ -310,7 +312,7 @@ export function ChartGallery({
 
       <Showcase
         title="line"
-        install={addCmd(pm, `${REPO}/area-chart`)}
+        install={addCmd(pm, regItem("area-chart"))}
         code={lineCode(tweaks)}
         toolbar={<ReplayButton onClick={() => onReplay("line")} />}
       >
@@ -333,7 +335,7 @@ export function ChartGallery({
       <div className="grid gap-14 lg:grid-cols-2 lg:gap-8">
         <Showcase
           title="pie"
-          install={addCmd(pm, `${REPO}/pie-chart`)}
+          install={addCmd(pm, regItem("pie-chart"))}
           code={pieCode(tweaks)}
           tall
           toolbar={<ReplayButton onClick={() => onReplay("pie")} />}
@@ -356,7 +358,7 @@ export function ChartGallery({
 
         <Showcase
           title="radar"
-          install={addCmd(pm, `${REPO}/radar-chart`)}
+          install={addCmd(pm, regItem("radar-chart"))}
           code={radarCode(tweaks)}
           tall
           toolbar={<ReplayButton onClick={() => onReplay("radar")} />}

apps/web/src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as AppRouteImport } from './routes/_app'
 import { Route as AdminRouteImport } from './routes/_admin'
 import { Route as OnboardingRouteRouteImport } from './routes/onboarding/route'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as RNameRouteImport } from './routes/r/$name'
 import { Route as OauthConsentRouteImport } from './routes/oauth/consent'
 import { Route as ApiMcpRouteImport } from './routes/api/mcp'
 import { Route as ApiInngestRouteImport } from './routes/api/inngest'
@@ -114,6 +115,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const RNameRoute = RNameRouteImport.update({
+  id: '/r/$name',
+  path: '/r/$name',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const OauthConsentRoute = OauthConsentRouteImport.update({
   id: '/oauth/consent',
   path: '/oauth/consent',
@@ -471,6 +477,7 @@ export interface FileRoutesByFullPath {
   '/api/inngest': typeof ApiInngestRoute
   '/api/mcp': typeof ApiMcpRoute
   '/oauth/consent': typeof OauthConsentRoute
+  '/r/$name': typeof RNameRoute
   '/$orgHandle/rules': typeof AppOrgHandleRulesRouteRouteWithChildren
   '/.well-known/oauth-authorization-server/$': typeof Char91DotwellKnownChar93OauthAuthorizationServerSplatRoute
   '/.well-known/oauth-protected-resource/$': typeof Char91DotwellKnownChar93OauthProtectedResourceSplatRoute
@@ -542,6 +549,7 @@ export interface FileRoutesByTo {
   '/api/inngest': typeof ApiInngestRoute
   '/api/mcp': typeof ApiMcpRoute
   '/oauth/consent': typeof OauthConsentRoute
+  '/r/$name': typeof RNameRoute
   '/.well-known/oauth-authorization-server/$': typeof Char91DotwellKnownChar93OauthAuthorizationServerSplatRoute
   '/.well-known/oauth-protected-resource/$': typeof Char91DotwellKnownChar93OauthProtectedResourceSplatRoute
   '/admin/reputation': typeof AdminAdminReputationRoute
@@ -615,6 +623,7 @@ export interface FileRoutesById {
   '/api/inngest': typeof ApiInngestRoute
   '/api/mcp': typeof ApiMcpRoute
   '/oauth/consent': typeof OauthConsentRoute
+  '/r/$name': typeof RNameRoute
   '/_app/$orgHandle/rules': typeof AppOrgHandleRulesRouteRouteWithChildren
   '/.well-known/oauth-authorization-server/$': typeof Char91DotwellKnownChar93OauthAuthorizationServerSplatRoute
   '/.well-known/oauth-protected-resource/$': typeof Char91DotwellKnownChar93OauthProtectedResourceSplatRoute
@@ -688,6 +697,7 @@ export interface FileRouteTypes {
     | '/api/inngest'
     | '/api/mcp'
     | '/oauth/consent'
+    | '/r/$name'
     | '/$orgHandle/rules'
     | '/.well-known/oauth-authorization-server/$'
     | '/.well-known/oauth-protected-resource/$'
@@ -759,6 +769,7 @@ export interface FileRouteTypes {
     | '/api/inngest'
     | '/api/mcp'
     | '/oauth/consent'
+    | '/r/$name'
     | '/.well-known/oauth-authorization-server/$'
     | '/.well-known/oauth-protected-resource/$'
     | '/admin/reputation'
@@ -831,6 +842,7 @@ export interface FileRouteTypes {
     | '/api/inngest'
     | '/api/mcp'
     | '/oauth/consent'
+    | '/r/$name'
     | '/_app/$orgHandle/rules'
     | '/.well-known/oauth-authorization-server/$'
     | '/.well-known/oauth-protected-resource/$'
@@ -897,6 +909,7 @@ export interface RootRouteChildren {
   ApiInngestRoute: typeof ApiInngestRoute
   ApiMcpRoute: typeof ApiMcpRoute
   OauthConsentRoute: typeof OauthConsentRoute
+  RNameRoute: typeof RNameRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
   ApiGithubCallbackRoute: typeof ApiGithubCallbackRoute
   ApiGithubInstallRoute: typeof ApiGithubInstallRoute
@@ -960,6 +973,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/r/$name': {
+      id: '/r/$name'
+      path: '/r/$name'
+      fullPath: '/r/$name'
+      preLoaderRoute: typeof RNameRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/oauth/consent': {
       id: '/oauth/consent'
       path: '/oauth/consent'
@@ -1607,6 +1627,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiInngestRoute: ApiInngestRoute,
   ApiMcpRoute: ApiMcpRoute,
   OauthConsentRoute: OauthConsentRoute,
+  RNameRoute: RNameRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
   ApiGithubCallbackRoute: ApiGithubCallbackRoute,
   ApiGithubInstallRoute: ApiGithubInstallRoute,

apps/web/src/routes/login.tsx

@@ -6,8 +6,12 @@ import {
 import { buildSeo, formatPageTitle } from "#/lib/seo"
 
 export const Route = createFileRoute("/login")({
-  validateSearch: (search: Record<string, unknown>): { error?: string } => ({
+  validateSearch: (
+    search: Record<string, unknown>
+  ): { error?: string; redirect?: string } => ({
     error: typeof search.error === "string" ? search.error : undefined,
+    redirect:
+      typeof search.redirect === "string" ? search.redirect : undefined,
   }),
   component: LoginPage,
   pendingComponent: LoginPageSkeleton,

apps/web/src/routes/r/$name.ts

@@ -0,0 +1,127 @@
+import { createHash } from "node:crypto"
+import { Databuddy } from "@databuddy/sdk/node"
+import { createFileRoute } from "@tanstack/react-router"
+import { env } from "@tripwire/env/server"
+
+/**
+ * Tracked Dither Kit registry endpoint. Serves each registry item's JSON from
+ * the canonical repo and counts the fetch as an install signal in Databuddy —
+ * the only way to measure installs, since the raw-GitHub shorthand is a black
+ * box. Deps are rewritten to self-referencing `/r/*` URLs so a bare
+ * `shadcn add https://tripwire.sh/r/dither-kit.json` install is zero-config and
+ * every fetch (including `core`) flows through here.
+ */
+
+const REPO_RAW =
+  "https://raw.githubusercontent.com/Boring-Software-Inc/dither-kit/main/r"
+const WEBSITE_ID = "09661145-7249-45d9-a9e3-f1a93e9c7266"
+const NS = "@dither-kit/"
+const ITEMS = new Set([
+  "registry",
+  "core",
+  "area-chart",
+  "bar-chart",
+  "pie-chart",
+  "radar-chart",
+  "dither-kit",
+])
+
+const db = env.DATABUDDY_API_KEY
+  ? new Databuddy({
+      apiKey: env.DATABUDDY_API_KEY,
+      websiteId: WEBSITE_ID,
+      source: "registry",
+    })
+  : null
+
+// Warm in-memory cache of the upstream JSON so we don't hit GitHub on every
+// install; the response itself is `no-store` so each install still reaches us.
+const cache = new Map<string, { raw: string; exp: number }>()
+
+async function upstreamJson(name: string): Promise<string | null> {
+  const hit = cache.get(name)
+  if (hit && hit.exp > Date.now()) return hit.raw
+  const res = await fetch(`${REPO_RAW}/${name}.json`)
+  if (!res.ok) return null
+  const raw = await res.text()
+  cache.set(name, { raw, exp: Date.now() + 5 * 60_000 })
+  return raw
+}
+
+/** Rewrite `@dither-kit/<x>` registryDependencies to this host's `/r/<x>.json`. */
+function selfHost(raw: string, origin: string): string {
+  const rewrite = (dep: string) =>
+    dep.startsWith(NS) ? `${origin}/r/${dep.slice(NS.length)}.json` : dep
+  const obj = JSON.parse(raw)
+  if (Array.isArray(obj.registryDependencies)) {
+    obj.registryDependencies = obj.registryDependencies.map(rewrite)
+  }
+  if (Array.isArray(obj.items)) {
+    obj.items = obj.items.map((it: { registryDependencies?: string[] }) => ({
+      ...it,
+      registryDependencies: (it.registryDependencies ?? []).map(rewrite),
+    }))
+  }
+  return JSON.stringify(obj)
+}
+
+function anonId(request: Request): string {
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ??
+    request.headers.get("x-real-ip") ??
+    "unknown"
+  const ua = request.headers.get("user-agent") ?? ""
+  return createHash("sha256").update(`${ip}|${ua}`).digest("hex").slice(0, 32)
+}
+
+async function handler({ request }: { request: Request }) {
+  const url = new URL(request.url)
+  const name = url.pathname.split("/").pop()?.replace(/\.json$/, "") ?? ""
+
+  if (!ITEMS.has(name)) {
+    return new Response(JSON.stringify({ error: "unknown registry item" }), {
+      status: 404,
+      headers: { "Content-Type": "application/json" },
+    })
+  }
+
+  const raw = await upstreamJson(name)
+  if (raw === null) {
+    return new Response(JSON.stringify({ error: "registry item unavailable" }), {
+      status: 502,
+      headers: { "Content-Type": "application/json" },
+    })
+  }
+
+  // Fire-and-forget — never block the install. Skip the index (`registry`);
+  // per-item hits are the signal (core ≈ total installs, others = popularity).
+  if (db && name !== "registry") {
+    db.track({
+      name: "registry_install",
+      anonymousId: anonId(request),
+      properties: {
+        item: name,
+        isCore: name === "core",
+        ua: request.headers.get("user-agent") ?? "",
+      },
+    }).catch(() => {})
+  }
+
+  return new Response(selfHost(raw, url.origin), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+      // No shared cache, so every install reaches us and is counted.
+      "Cache-Control": "no-store",
+      "Access-Control-Allow-Origin": "*",
+    },
+  })
+}
+
+export const Route = createFileRoute("/r/$name")({
+  server: {
+    handlers: {
+      GET: handler,
+    },
+  },
+})

packages/env/src/server.ts

@@ -80,6 +80,7 @@ export const env = createEnv({
         message: "DATABASE_URL must be set in production",
       }),
     UNKEY_ROOT_KEY: z.string().min(1).optional(),
+    DATABUDDY_API_KEY: z.string().min(1).optional(),
     OPENROUTER_API_KEY: z.string().min(1).optional(),
     AUTUMN_SECRET_KEY: z.string().min(1).optional(),
     BETTER_AUTH_API_KEY: z.string().min(1).optional(),