perf: defer Clarity until interaction

landing-astro/astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 import react from '@astrojs/react';
 import tailwindcss from '@tailwindcss/vite';
+import { readFile, writeFile } from 'node:fs/promises';
 
 // Mirrors fleet/sarthakagrawal/astro.config.mjs, the reference 360 ms-LCP
 // Astro setup. Pure static output (no SSR adapter) — the rolepatch.com
@@ -22,7 +23,25 @@ export default defineConfig({
   build: {
     format: 'file',
   },
-  integrations: [sitemap(), react()],
+  integrations: [sitemap(), react(), {
+    name: 'responsive-hero',
+    hooks: {
+      'astro:build:done': async ({ dir }) => {
+        // The shared Workbench template has no srcset passthrough. Add only
+        // delivery attributes to its static hero; keep its markup and styling.
+        const page = new URL('index.html', dir);
+        const html = await readFile(page, 'utf8');
+        const hero = /<img\b[^>]*\bsrc="\/images\/patch-stage\.webp"[^>]*>/g;
+        if ([...html.matchAll(hero)].length !== 1) {
+          throw new Error('Expected exactly one Workbench hero image');
+        }
+        await writeFile(page, html.replace(hero, (tag) => tag.replace(
+          'src="/images/patch-stage.webp"',
+          'src="/images/patch-stage.webp" srcset="/images/patch-stage-400.webp 400w, /images/patch-stage-700.webp 700w, /images/patch-stage-1000.webp 1000w, /images/patch-stage.webp 1400w" sizes="(max-width: 639px) calc(100vw - clamp(32px, 16px + 5vw, 80px) - 34px), (max-width: 1023px) calc(100vw - clamp(32px, 16px + 5vw, 80px) - 82px), calc(min(100vw, 1216px) - clamp(32px, 16px + 5vw, 80px) - 114px)"',
+        )));
+      },
+    },
+  }],
   vite: {
     plugins: [tailwindcss()],
     css: { transformer: 'lightningcss' },

landing-astro/src/pages/index.astro

@@ -48,11 +48,7 @@ content.page.jsonLd = [jsonLd, {
       data-vitals-routes="changelog,docs,faq"
     ></script>
     <script is:inline>
-      (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-      })(window,document,"clarity","script","y6buz6rkot");
+      (function(c,l,a,r,i){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};var done=0,ev=["pointerdown","keydown","touchstart","scroll"];function go(){if(done)return;done=1;ev.forEach(function(e){removeEventListener(e,go)});var t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;var y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)}ev.forEach(function(e){addEventListener(e,go,{passive:true,once:true})});setTimeout(go,90000)})(window,document,"clarity","script","y6buz6rkot");
       window.clarity("set","project_id","rolepatch");
     </script>
     <script is:inline set:html={APP_HEALTH_CLICK_SCRIPT}></script>

src/app/layout.tsx

@@ -124,7 +124,7 @@ export default function RootLayout({
         {/* Microsoft Clarity — session replay + heatmaps (additive; PostHog stays) */}
         <script
           dangerouslySetInnerHTML={{
-            __html: `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/y6buz6rkot";y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);})(window,document,"clarity","script","y6buz6rkot");window.clarity("set","project_id","rolepatch");`,
+            __html: `(function(c,l,a,r,i){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};var done=0,ev=["pointerdown","keydown","touchstart","scroll"];function go(){if(done)return;done=1;ev.forEach(function(e){removeEventListener(e,go)});var t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;var y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)}ev.forEach(function(e){addEventListener(e,go,{passive:true,once:true})});setTimeout(go,90000)})(window,document,"clarity","script","y6buz6rkot");window.clarity("set","project_id","rolepatch");`,
           }}
         />
       </head>