@cparkerwebm/webmonterey 1.1.0 → 1.3.0

package/src/includes/webmonterey/webmaster/webmaster.test.ts

@@ -0,0 +1,74 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+import { AGENCY, contentTag, CREDIT_TEXT, creditUrl, WEBMASTER_PATH } from './webmaster.ts';
+
+/*
+ * Webmaster.astro read as SOURCE, because it cannot be imported here: an .astro file only
+ * resolves inside an Astro build. A source assertion is the weaker tool and it is the one
+ * available.
+ */
+const componentSource = readFileSync(new URL('./Webmaster.astro', import.meta.url), 'utf8');
+const template = componentSource.replace(/\{\s*\/\*[\s\S]*?\*\/\s*\}/g, '');
+const anchors: string[] = template.match(/<a\s[^>]*>/g) ?? [];
+const anchor = (): string => anchors[0] ?? '';
+
+test('creditUrl points at the agency home page, not a /credits page', () => {
+  const url = new URL(creditUrl('example.com'));
+  assert.equal(url.origin, 'https://webmonterey.com');
+  assert.equal(url.pathname, '/');
+});
+
+test('creditUrl carries all four UTM parameters', () => {
+  const { searchParams } = new URL(creditUrl('example.com'));
+  assert.equal(searchParams.get('utm_source'), 'client');
+  assert.equal(searchParams.get('utm_campaign'), 'webmaster');
+  assert.equal(searchParams.get('utm_content'), 'example_com');
+});
+
+test('utm_medium separates the two surfaces, and defaults to website', () => {
+  assert.equal(
+    new URL(creditUrl('example.com', 'website')).searchParams.get('utm_medium'),
+    'website',
+  );
+  assert.equal(new URL(creditUrl('example.com', 'email')).searchParams.get('utm_medium'), 'email');
+  assert.equal(new URL(creditUrl('example.com')).searchParams.get('utm_medium'), 'website');
+});
+
+test('utm_content is the production domain, with every dot as an underscore', () => {
+  const url = new URL(creditUrl('sub.example.co.uk', 'email'));
+  assert.equal(url.searchParams.get('utm_content'), 'sub_example_co_uk');
+  /* Scoped to the query: the destination host is allowed to look like a host. */
+  assert.equal(url.search.includes('.'), false);
+});
+
+test('contentTag changes nothing but the dots', () => {
+  assert.equal(contentTag('localhost'), 'localhost');
+  assert.equal(contentTag('steven-glaze.com'), 'steven-glaze_com');
+});
+
+test('CREDIT_TEXT is the shared wording', () => {
+  assert.equal(CREDIT_TEXT, 'Powered by WebMonterey');
+});
+
+test('the agency identity is internally consistent', () => {
+  assert.ok(AGENCY.id.startsWith(AGENCY.url), 'the @id lives on the agency origin');
+  assert.ok(AGENCY.sameAs.every((u) => u.startsWith('https://')));
+  assert.equal(new Set(AGENCY.sameAs).size, AGENCY.sameAs.length, 'no duplicate profile');
+});
+
+/* ── the footer credit: an INTERNAL link now ──────────────────────────────────────────────── */
+
+test("the site credit renders exactly one link, to the site's own webmaster page", () => {
+  assert.equal(anchors.length, 1, `expected one anchor, found ${anchors.length}`);
+  assert.match(anchor(), new RegExp(`href=\\{WEBMASTER_PATH\\}`));
+  assert.equal(WEBMASTER_PATH, '/webmaster');
+});
+
+test('an internal link does not open a new tab and carries no rel', () => {
+  // The old outbound credit opened a new tab; an internal link that did would be a bug.
+  assert.doesNotMatch(anchor(), /target=/);
+  assert.doesNotMatch(anchor(), /rel=/);
+  assert.doesNotMatch(template, /opens in a new tab/);
+});

package/src/includes/webmonterey/webmaster/webmaster.ts

@@ -0,0 +1,89 @@
+/*
+ * The webmaster credit, in ONE place.
+ *
+ * Two surfaces render it and they cannot share a component: the site footer is an .astro
+ * component, and transactional email is a string with inline styles (email clients strip <style>
+ * blocks). Without this module the wording exists twice, and the next time it changes one copy
+ * gets missed.
+ *
+ * WHERE THE FOOTER LINK GOES CHANGED. It used to leave the client's site for webmonterey.com. Now
+ * it goes to the site's OWN /webmaster page - indexable, in the sitemap, rendered with the site's
+ * chrome - and THAT page carries the one outbound link. Three things that buys: the visitor stays
+ * on the client's site; every client site has a page that says who to call when something is
+ * wrong; and the outbound link sits on a real page with real copy, which is a backlink rather
+ * than a footer credit. The email footer keeps the outbound link, because an email cannot
+ * usefully point at a page on the site it is about.
+ *
+ * utm_content is ALWAYS the production domain from webmonterey.json, never the host the page is
+ * served from - a preview build still reports the client's own domain, so staging traffic does
+ * not fragment the attribution. It is written with underscores (`example_com`): a dot makes the
+ * value look like a hostname, and analytics UIs read it as one rather than as the label it is.
+ *
+ * THE AGENCY'S IDENTITY IS HERE TOO, for the webmaster page's structured data. It is the one
+ * place in the package that names the agency, deliberately: the credit is the package saying who
+ * built the framework, which a public package is allowed to do, and keeping it in one module
+ * means a change to the name, the address or a profile is one edit.
+ */
+
+/** The credit wording. Rendered verbatim on the site and in email. */
+export const CREDIT_TEXT = 'Powered by WebMonterey';
+
+/** The page every site has. Fixed - the footer, the sitemap and the doctor all rely on it. */
+export const WEBMASTER_PATH = '/webmaster';
+
+/** The share image the webmaster page carries, served from the package by the integration. */
+export const WEBMASTER_OG_PATH = '/webmaster/og.png';
+
+/**
+ * The agency, as the webmaster page's structured data describes it. The `@id` is the same
+ * entity webmonterey.com declares for itself, so every client page points at one organization
+ * rather than a hundred copies of it.
+ */
+export const AGENCY = {
+  id: 'https://webmonterey.com/#organization',
+  name: 'WebMonterey',
+  url: 'https://webmonterey.com/',
+  description:
+    'A webmaster maintenance service in Monterey, California: design, build, hosting, security and ongoing care for small-business websites.',
+  address: { addressLocality: 'Monterey', addressRegion: 'CA', addressCountry: 'US' },
+  sameAs: [
+    /* The Google Business Profile, by its Knowledge Graph id - the stable form of the share link. */
+    'https://www.google.com/search?kgmid=/g/11nvks0plt',
+    'https://www.linkedin.com/company/webmonterey',
+    'https://www.facebook.com/webmonterey',
+    'https://www.youtube.com/@webmonterey',
+    'https://www.pinterest.com/webmonterey',
+    'https://github.com/webmonterey',
+    'https://www.crunchbase.com/organization/webmonterey',
+    'https://www.alignable.com/monterey-ca/webmonterey',
+    'https://www.yelp.com/biz/webmonterey-monterey',
+  ],
+} as const;
+
+/**
+ * Which surface the click came from. Kept separate from utm_content so the report can tell a
+ * page click from an email click without splitting it per client.
+ */
+export type CreditMedium = 'website' | 'email';
+
+/**
+ * The client's domain as a UTM label rather than as a domain. Dots only - the value is
+ * otherwise left exactly as webmonterey.json wrote it, so what lands in the report is still
+ * recognizably the site it came from.
+ */
+export function contentTag(domain: string): string {
+  return domain.replace(/\./g, '_');
+}
+
+/** The attributed link to the agency for one client site. */
+export function creditUrl(domain: string, medium: CreditMedium = 'website'): string {
+  const params = new URLSearchParams({
+    utm_source: 'client',
+    utm_medium: medium,
+    utm_campaign: 'webmaster',
+    /* See the note above: a dot here is a link waiting to be made out of the query string. */
+    utm_content: contentTag(domain),
+  });
+
+  return `${AGENCY.url}?${params}`;
+}

package/src/integration/index.ts

@@ -24,13 +24,19 @@
 import type { AstroIntegration } from 'astro';
 import sitemap from '@astrojs/sitemap';
 
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import { compileToCss } from '../design/compile.ts';
 import { imageSize } from './image-size.ts';
 import { loadForms, loadSiteFiles, resolveSiteUrl } from './config.ts';
-import { APP_DIR, appEnabled, resolveAppPath } from '../includes/webmonterey/config.ts';
+import {
+  APP_DIR,
+  appEnabled,
+  previewReason,
+  resolveAppPath,
+} from '../includes/webmonterey/config.ts';
 
 export interface WebmontereyOptions {
   /**
@@ -67,9 +73,31 @@ export interface WebmontereyOptions {
    * Set false for a site publishing a sitemap another way, rather than having two disagree.
    */
   sitemap?: boolean;
+  /**
+   * Serve `/webmaster` and its share image. Default true.
+   *
+   * The page every site has: who built it, who to call. The footer credit links to it. A client
+   * who will not have it sets this false and the credit then has nowhere to point - so the
+   * footer should drop the credit too, and the agreement should say so.
+   */
+  webmaster?: boolean;
+  /**
+   * The branch Workers Builds deploys to production. Default `main`.
+   *
+   * Every other branch is a PREVIEW - and so is every build, on any branch and from any machine,
+   * of a site whose webmonterey.json says `environment: "staging"`. A preview build is different
+   * on purpose: every page is noindex with no canonical, there is no sitemap, robots.txt
+   * disallows everything, and Google Tag Manager does not load - so a client's review link can
+   * never be indexed, a site that has not launched cannot be indexed before it exists, and
+   * clicking around either never lands in their analytics. The branch comes from
+   * WORKERS_CI_BRANCH, which Workers Builds injects; the decision is `isPreviewBuild` in
+   * includes/webmonterey/config.ts.
+   */
+  productionBranch?: string;
 }
 
 const VIRTUAL = {
+  build: 'virtual:webm/build',
   site: 'virtual:webm/site',
   design: 'virtual:webm/design',
   tokens: 'virtual:webm/tokens.css',
@@ -78,8 +106,18 @@ const VIRTUAL = {
   custom: 'virtual:webm/custom',
   shareImage: 'virtual:webm/share-image',
   icons: 'virtual:webm/icons',
+  webmasterOg: 'virtual:webm/webmaster-og',
 } as const;
 
+/*
+ * THE WEBMASTER PAGE'S SHARE IMAGE, read here and not in the endpoint that serves it. The
+ * Cloudflare adapter builds server modules for the workerd target, where `import.meta.url` is
+ * not a file URL, so a `new URL('../assets/...', import.meta.url)` inside a route throws
+ * "Invalid URL string" at prerender. This integration runs in Node at config time, where the
+ * path is real; the bytes travel to the endpoint as base64 through a virtual module.
+ */
+const WEBMASTER_OG = fileURLToPath(new URL('../assets/opengraph-webmaster.png', import.meta.url));
+
 /** Vite resolves virtual ids to a `\0`-prefixed form so other plugins leave them alone. */
 const resolved = (id: string) => `\0${id}`;
 
@@ -103,6 +141,32 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
         const app = appEnabled(files.site);
         const appPath = resolveAppPath(files.site);
 
+        /*
+         * PREVIEW OR PRODUCTION, decided in one place - previewReason - from two signals. A site
+         * whose webmonterey.json says `environment: "staging"` is a preview in every build,
+         * whatever the branch and whatever the machine; and on a launched site any Workers
+         * Builds branch other than the production one is a preview too. A local build of a
+         * production site has no branch and is production output, which is what
+         * `npm run preview` and the e2e need. See the option, and the function.
+         */
+        const branch = process.env.WORKERS_CI_BRANCH ?? null;
+        const productionBranch = options.productionBranch ?? 'main';
+        const reason = previewReason({
+          environment: files.site.environment,
+          branch,
+          productionBranch,
+        });
+        const preview = reason !== null;
+        if (reason === 'staging') {
+          logger.info(
+            'environment is "staging" in webmonterey.json: a preview build - noindex, no sitemap, no analytics',
+          );
+        } else if (reason === 'branch') {
+          logger.info(
+            `branch "${branch}" is not ${productionBranch}: a preview build - noindex, no sitemap, no analytics`,
+          );
+        }
+
         /*
          * Editing either config file must rebuild. Without this a palette change in design.json
          * shows nothing until the dev server is restarted, which reads as the compiler being
@@ -157,7 +221,7 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
           output: 'static',
 
           integrations:
-            site && options.sitemap !== false
+            site && !preview && options.sitemap !== false
               ? [
                   sitemap({
                     filter: (page) => {
@@ -214,6 +278,8 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
                 },
                 load(id: string) {
                   switch (id) {
+                    case resolved(VIRTUAL.build):
+                      return `export default ${JSON.stringify({ preview, reason, branch })};`;
                     case resolved(VIRTUAL.site):
                       return `export default ${JSON.stringify(files.site)};`;
                     case resolved(VIRTUAL.design):
@@ -235,7 +301,7 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
                        * both tags - the scrapers all measure the image themselves anyway, so
                        * saying nothing beats saying something wrong.
                        */
-                      const size = imageSize(join(root, 'public/open-graph.png'));
+                      const size = imageSize(join(root, 'public/opengraph.png'));
                       return `export default ${JSON.stringify(size)};`;
                     }
                     case resolved(VIRTUAL.icons): {
@@ -283,6 +349,12 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
                     }
                     case resolved(VIRTUAL.forms):
                       return `export const FORMS = ${JSON.stringify(loadForms(root))};`;
+                    case resolved(VIRTUAL.webmasterOg):
+                      /* Bytes and the REAL size, so the page never declares dimensions the file does not have. */
+                      return `export default ${JSON.stringify({
+                        base64: readFileSync(WEBMASTER_OG, 'base64'),
+                        ...(imageSize(WEBMASTER_OG) ?? { width: null, height: null }),
+                      })};`;
                     case resolved(VIRTUAL.registry):
                       /*
                        * Re-exported from the client repo, because every visible component lives
@@ -357,6 +429,21 @@ export default function webmonterey(options: WebmontereyOptions = {}): AstroInte
           injectRoute({ pattern: '/webm', entrypoint: '@cparkerwebm/webmonterey/pages/webm' });
         }
 
+        /*
+         * THE WEBMASTER PAGE, and its share image served from the package. Indexable and in the
+         * sitemap - the footer credit links here rather than off the site. See pages/webmaster.
+         */
+        if (options.webmaster !== false) {
+          injectRoute({
+            pattern: '/webmaster',
+            entrypoint: '@cparkerwebm/webmonterey/pages/webmaster',
+          });
+          injectRoute({
+            pattern: '/webmaster/og.png',
+            entrypoint: '@cparkerwebm/webmonterey/pages/webmaster-og',
+          });
+        }
+
         /*
          * THE WEB APP'S PUBLIC PATH. Only when the site has switched the app on AND named a path
          * other than the folder - with the default there is nothing to rewrite, and a middleware

package/src/integration/virtual.d.ts

@@ -4,6 +4,18 @@
  * These do not exist on disk. Each resolves at build time to something in the CLIENT repo, which
  * a package cannot import relatively - see includes/webmonterey/config.ts.
  */
+/**
+ * What this build is FOR. `preview` is true when webmonterey.json says `environment: "staging"`,
+ * or on any Workers Builds branch other than the production one - every page noindex, no
+ * sitemap, no analytics. `reason` says which signal decided it. A local build of a production
+ * site is not a preview. See `isPreviewBuild` in includes/webmonterey/config.ts.
+ */
+declare module 'virtual:webm/build' {
+  import type { PreviewReason } from '../includes/webmonterey/config.ts';
+  const build: { preview: boolean; reason: PreviewReason; branch: string | null };
+  export default build;
+}
+
 declare module 'virtual:webm/site' {
   import type { SiteConfig } from '../includes/webmonterey/config.ts';
   const config: SiteConfig;
@@ -28,8 +40,14 @@ declare module 'virtual:webm/icons' {
 /** The client's own stylesheet - src/styles/custom/. Side-effect import only. */
 declare module 'virtual:webm/custom';
 
+/** The webmaster page's share image - bytes as base64 and its measured size - from the package. */
+declare module 'virtual:webm/webmaster-og' {
+  const image: { base64: string; width: number | null; height: number | null };
+  export default image;
+}
+
 /**
- * The real pixel size of `public/open-graph.png`, measured at build time, or null when there is
+ * The real pixel size of `public/opengraph.png`, measured at build time, or null when there is
  * no readable file there. Nothing else can check it: public/ is copied verbatim.
  */
 declare module 'virtual:webm/share-image' {

package/src/layouts/base.astro

@@ -35,6 +35,7 @@ import {
 import { header, footer, panels, structuredData } from 'virtual:webm/registry';
 import measuredShareImage from 'virtual:webm/share-image';
 import icons from 'virtual:webm/icons';
+import build from 'virtual:webm/build';
 
 /*
  * Site-wide plumbing, wired in once here rather than per page.
@@ -96,7 +97,7 @@ interface Props {
    */
   noindex?: boolean;
   /**
-   * The social share image, as a path under `public/`. Defaults to `/open-graph.png`.
+   * The social share image, as a path under `public/`. Defaults to `/opengraph.png`.
    *
    * MUST be a public/ path, never an imported asset run through `getImage`. On a prerendered
    * route `getImage` returns a built `/_astro/…` file, but on a `prerender = false` route
@@ -109,7 +110,7 @@ interface Props {
   /*
    * Dimensions of `shareImage`, in pixels. THEY MUST TRAVEL WITH IT.
    *
-   * These default to the size of the shipped `public/open-graph.png`. Files in public/ are
+   * These default to the size of the shipped `public/opengraph.png`. Files in public/ are
    * copied verbatim and never processed, so nothing can measure the real image at build time
    * and nothing will warn when these stop matching — a client dropping in a differently sized
    * card image silently publishes false dimensions. Found exactly that way: a live site
@@ -143,6 +144,13 @@ interface Props {
    * consistent state rather than an unset one.
    */
   analytics?: boolean;
+  /**
+   * Render the site's `structuredData` component. Default true.
+   *
+   * Set false on a route that emits its own graph through the `head` slot - the package's
+   * /webmaster page does, about the agency - so two nodes never claim the same page `@id`.
+   */
+  structuredData?: boolean;
   /**
    * The back-to-top control. Default true.
    *
@@ -157,10 +165,10 @@ const {
   title,
   description,
   brandTitle = brandTitles,
-  noindex = false,
-  shareImage = '/open-graph.png',
+  noindex: noindexProp = false,
+  shareImage = '/opengraph.png',
   /*
-   * MEASURED, not assumed. Both default to the real size of public/open-graph.png, read from the
+   * MEASURED, not assumed. Both default to the real size of public/opengraph.png, read from the
    * file's own header at build time - so replacing the card art cannot leave the tags describing
    * the old one, which is what happened on every generation-2 site.
    *
@@ -170,9 +178,24 @@ const {
   shareImageWidth = measuredShareImage?.width ?? null,
   shareImageHeight = measuredShareImage?.height ?? null,
   analytics = true,
+  structuredData: renderStructuredData = true,
   scrollTop = true,
 } = Astro.props;
 
+/*
+ * A PREVIEW BUILD IS NOINDEX, EVERY PAGE. A preview is a staging site (`environment` in
+ * webmonterey.json) on any hostname, or a non-production branch of a launched one - see
+ * isPreviewBuild in includes/webmonterey/config.ts. The review link a client gets is a public
+ * workers.dev URL, and a search engine that finds one indexes a duplicate of the site under the
+ * wrong hostname - or, for a site that has not launched, indexes the site before it exists.
+ * noindex also suppresses the canonical and og:url below, so the preview sends one signal rather
+ * than "do not index me" beside "my real address is over there". GTM is skipped on a preview for
+ * the same reason in the other direction: a client clicking through their review link must not
+ * show up in their own analytics.
+ */
+const noindex = noindexProp || build.preview;
+const analyticsOn = analytics && !build.preview;
+
 /*
  * Canonical URL. Only emitted once `site` is derived from `domain` in webmonterey.json.
  * Astro.site is undefined until then, and a canonical pointing at localhost is worse than none.
@@ -264,7 +287,7 @@ const StructuredData = structuredData;
 
     <!-- FIRST. Sets consent state and Consent Mode defaults before any third party loads. -->
     <ConsentInit />
-    {analytics && gtmId && <TagManager id={gtmId} />}
+    {analyticsOn && gtmId && <TagManager id={gtmId} />}
 
     {
       /*
@@ -351,7 +374,7 @@ const StructuredData = structuredData;
     */
     }
     {
-      StructuredData && !noindex && (
+      StructuredData && renderStructuredData && !noindex && (
         <StructuredData title={title} description={description} image={shareImageUrl} />
       )
     }
@@ -363,7 +386,7 @@ const StructuredData = structuredData;
     <a class="webm-skip-link" href="#webm-main">Skip to content</a>
 
     <!-- GTM's noscript iframe must be the first thing in <body>. -->
-    {analytics && gtmId && <TagManager id={gtmId} noscript />}
+    {analyticsOn && gtmId && <TagManager id={gtmId} noscript />}
 
     <slot name="header">{Header && <Header />}</slot>
 

package/src/package.test.ts

@@ -86,6 +86,26 @@ test('every directory the code reads out of the package is published', () => {
   }
 });
 
+test('the webmaster share image is a share-card shape, and is what the seed ships too', async () => {
+  /*
+   * og:image:width/height on the webmaster page are MEASURED from this file by the integration,
+   * so any size works - but a crawler crops to roughly 1.91:1 and wants at least 1200 wide, and
+   * an image outside that gets letterboxed or rejected. The same artwork is the default share
+   * image a client site starts with, so the two must not drift apart.
+   */
+  const { imageSize } = await import('./integration/image-size.ts');
+  const size = imageSize(join(ROOT, 'src/assets/opengraph-webmaster.png'));
+  assert.ok(size, 'src/assets/opengraph-webmaster.png is not a readable PNG/JPEG/GIF');
+  assert.ok(size.width >= 1200, `at least 1200 wide, got ${size.width}`);
+  const ratio = size.width / size.height;
+  assert.ok(Math.abs(ratio - 1.91) < 0.03, `share cards are ~1.91:1, got ${ratio.toFixed(2)}`);
+  assert.equal(
+    readFileSync(join(ROOT, 'src/assets/opengraph-webmaster.png'), 'base64'),
+    readFileSync(join(ROOT, 'template/public/opengraph.png'), 'base64'),
+    'the seed share image and the webmaster image are the same artwork',
+  );
+});
+
 test('the package does not depend on itself', () => {
   /*
    * IT DID, AND IT SHIPPED. package.json carried

package/src/pages/robots.txt.ts

@@ -21,8 +21,22 @@
  * before concluding the file has been overwritten.
  */
 import type { APIRoute } from 'astro';
+import build from 'virtual:webm/build';
 
 export const GET: APIRoute = ({ site }) => {
+  /*
+   * A PREVIEW DISALLOWS EVERYTHING - a staging site on any hostname, or a non-production branch
+   * of a launched one (isPreviewBuild in includes/webmonterey/config.ts). Every page on a preview
+   * is already noindex; this is the belt to that brace, and it is the one place Disallow is
+   * right - there is nothing on a preview a crawler should ever fetch, and no noindex tag it
+   * needs to see.
+   */
+  if (build.preview) {
+    return new Response('User-agent: *\nDisallow: /\n', {
+      headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+    });
+  }
+
   const lines = ['User-agent: *', 'Allow: /'];
 
   /*

package/src/pages/webmaster-og.png.ts

@@ -0,0 +1,31 @@
+/*
+ * /webmaster/og.png - the webmaster page's share image, served FROM THE PACKAGE.
+ *
+ * public/ is copied verbatim from the site root and the package cannot add to it; a file seeded
+ * there is written once and never refreshed. This endpoint serves the image out of the package
+ * instead, so it is same-origin on every site, needs nothing in the client's repo, and a
+ * redesign reaches every site on `npm update`. Prerendered, so the deployed result is a plain
+ * static file.
+ *
+ * The bytes arrive through a virtual module rather than a file read: the Cloudflare adapter
+ * builds routes for the workerd target, where `import.meta.url` is not a file URL and a
+ * relative `new URL()` throws at prerender. The integration reads the file in Node and inlines
+ * it. See integration/index.ts.
+ *
+ * The page reads the image's measured size from the same module, so og:image:width and height
+ * are always the file's own.
+ */
+import type { APIRoute } from 'astro';
+import image from 'virtual:webm/webmaster-og';
+
+export const prerender = true;
+
+export const GET: APIRoute = () => {
+  const bytes = Uint8Array.from(atob(image.base64), (c) => c.charCodeAt(0));
+  return new Response(bytes, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, max-age=86400',
+    },
+  });
+};