PostHog analytics and shared OG card

index.html

@@ -7,6 +7,17 @@
         <link rel="apple-touch-icon" href="https://kevinschaich.com/icon/toolbench-180.png" />
         <title>Toolbench | Darkgrade</title>
         <meta name="twitter:card" content="summary_large_image" />
+        <script>
+            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+            posthog.init('phc_eOW21t5JEdgDB5lue4y9GuJhltWD5miYyLw86JkMN6g', {
+                api_host: 'https://ph.darkgrade.com',
+                defaults: '2025-11-30',
+                autocapture: true,
+                disable_session_recording: true,
+                disable_surveys: true,
+                capture_dead_clicks: false,
+            })
+        </script>
     </head>
     <body>
         <div id="root"></div>

package.json

@@ -15,7 +15,8 @@
         "data": "bun scripts/build-data.ts"
     },
     "dependencies": {
-        "@kevinschaich/components": "^0.8.0",
+        "@fontsource/fragment-mono": "^5.3.0",
+        "@kevinschaich/components": "^0.8.2",
         "d3-array": "^3.2.5",
         "d3-scale": "^4.0.3",
         "d3-shape": "^3.2.1",

scripts/prerender.ts

@@ -7,6 +7,7 @@ import { Resvg } from '@resvg/resvg-js'
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dirname, join, resolve } from 'node:path'
+import { OgCard, backdropDataURI, darkgradeMark } from '@kevinschaich/components/og'
 import satori from 'satori'
 
 interface Route {
@@ -25,58 +26,29 @@ const server = (await import(join(root, '.server', 'server.js'))) as {
 const output = join(root, 'dist', server.BENCH.path)
 const template = readFileSync(join(output, 'index.html'), 'utf8')
 const fonts = createRequire(import.meta.url)
-const font = (weight: number) => readFileSync(fonts.resolve(`@fontsource/public-sans/files/public-sans-latin-${weight}-normal.woff`))
+const font = (name: string, weight: number) => readFileSync(fonts.resolve(`@fontsource/${name}/files/${name}-latin-${weight}-normal.woff`))
 const FONTS = [
-    { name: 'Public Sans', data: font(400), weight: 400 as const, style: 'normal' as const },
-    { name: 'Public Sans', data: font(700), weight: 700 as const, style: 'normal' as const },
+    { name: 'body', data: font('public-sans', 400), weight: 400 as const, style: 'normal' as const },
+    { name: 'heading', data: font('public-sans', 600), weight: 600 as const, style: 'normal' as const },
+    { name: 'heading', data: font('public-sans', 500), weight: 500 as const, style: 'normal' as const },
+    { name: 'mono', data: font('fragment-mono', 400), weight: 400 as const, style: 'normal' as const },
 ]
 
 const escape = (text: string): string => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
 
 /**
- * The preview card, Darkgrade's look: obsidian with a gold accent. The heading and numbers sit in the
- * middle with wide margins, because chat apps crop and zoom previews from the edges in.
+ * The preview card: the shared Darkgrade card from @kevinschaich/components. Stats fold into one line under the heading.
  */
 async function card(route: Route): Promise<Buffer> {
-    const text = (children: string, style: Record<string, unknown>) => ({ type: 'div', props: { style: { display: 'flex', ...style }, children } })
-    const element = {
-        type: 'div',
-        props: {
-            style: {
-                width: 1200,
-                height: 630,
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                gap: 44,
-                padding: '0 120px',
-                background: 'radial-gradient(circle at 85% 0%, #2a2216 0%, #0b0b0c 60%)',
-                color: '#eae6dc',
-                fontFamily: 'Public Sans',
-            },
-            children: [
-                text(`DARKGRADE  ·  ${route.card.eyebrow.toUpperCase()}`, { fontSize: 22, letterSpacing: 6, color: '#f4c66e' }),
-                text(route.card.heading, { fontSize: route.card.heading.length > 44 ? 54 : 68, fontWeight: 700, lineHeight: 1.1, maxWidth: 960 }),
-                {
-                    type: 'div',
-                    props: {
-                        style: { display: 'flex', gap: 24 },
-                        children: route.card.stats.map(stat => ({
-                            type: 'div',
-                            props: {
-                                style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '18px 26px', border: '1px solid #3a3326', borderRadius: 16, background: 'rgba(244,198,110,0.06)' },
-                                children: [
-                                    text(stat.label.toUpperCase(), { fontSize: 18, letterSpacing: 3, color: '#9c968a' }),
-                                    text(stat.value, { fontSize: 38, fontWeight: 700, color: '#f4c66e' }),
-                                ],
-                            },
-                        })),
-                    },
-                },
-            ],
-        },
-    }
-    const svg = await satori(element as Parameters<typeof satori>[0], { width: 1200, height: 630, fonts: FONTS })
+    const sub = route.card.stats.length ? route.card.stats.map(stat => `${stat.label} ${stat.value}`).join('  ·  ') : route.description
+    const element = OgCard({
+        logo: { mark: darkgradeMark.dark, name: 'Darkgrade' },
+        main: route.card.heading,
+        sub,
+        address: `darkgrade.com${server.BENCH.path}${route.path}`.replace(/\/$/, ''),
+        background: await backdropDataURI(),
+    })
+    const svg = await satori(element, { width: 1200, height: 630, fonts: FONTS })
     return Buffer.from(new Resvg(svg).render().asPng())
 }