@pantheon-systems/create-p1-starter-kit 0.8.0 → 0.11.0

package/README.md

@@ -0,0 +1,114 @@
+# @pantheon-systems/create-p1-starter-kit
+
+Scaffold a new P1 project — a Next.js app with the Puck visual editor and Pantheon Content
+Publisher integration wired up and ready to run.
+
+## Usage
+
+```bash
+# pnpm
+pnpm create @pantheon-systems/p1-starter-kit my-app
+
+# npm
+npm create @pantheon-systems/p1-starter-kit my-app
+
+# yarn
+yarn create @pantheon-systems/p1-starter-kit my-app
+```
+
+The CLI prompts for:
+
+- **Project name** — defaults to the directory name argument
+- **Package manager** — auto-detects pnpm/npm/yarn, allows override
+- **Git initialization** — creates a repo with an initial commit
+- **Dependency installation** — runs install immediately
+
+## What's included
+
+- **Next.js 16 App Router** — server components and modern routing
+- **Puck editor** — visual drag-and-drop page building at `/p1/<path>`
+- **Content Publisher integration** — CMS with datasource bindings
+- **Pre-built blocks** — typography, media, layout, and action components
+- **Tailwind CSS v4**, **TypeScript**, **Vitest**, **ESLint**
+
+## Getting started
+
+After scaffolding:
+
+1. **Configure environment variables:**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Fill in:
+
+   | Variable | Purpose |
+   | --- | --- |
+   | `PCC_SITE_ID` | Content Cloud site ID |
+   | `PCC_TOKEN` | API token for your site |
+   | `NEXT_PUBLIC_CSS_BASE_URL` | CSS API base URL |
+   | `NEXT_PUBLIC_CSS_SITE_ID` | Site identifier (UUID) |
+   | `CSS_API_KEY` | Server-side API key |
+
+2. **Start the dev server:**
+
+   ```bash
+   pnpm dev
+   ```
+
+3. **Open:**
+   - Site — http://localhost:3000
+   - Dashboard — http://localhost:3000/p1
+   - Editor — http://localhost:3000/p1/your-page-path
+
+## Project structure
+
+```
+my-app/
+├── app/
+│   ├── page.tsx                  # Site root
+│   ├── [...puckPath]/            # Published pages
+│   └── p1/
+│       ├── page.tsx              # Dashboard
+│       ├── [[...p1]]/            # Editor & renderer
+│       ├── api/[...p1]/          # API routes
+│       └── auth/[...action]/     # Auth routes
+├── components/puck/              # Block definitions
+├── lib/                          # Datasources and utilities
+├── puck.config.tsx               # Puck configuration
+└── .env.example                  # Environment template
+```
+
+## Customization
+
+- **Add blocks** — create components in `components/puck/`, register them in `puck.config.tsx`
+- **Add datasources** — define in `lib/` and register for use in blocks
+- **Styling** — edit the Tailwind config or component styles
+
+Your scaffolded project also includes an optional `scripts/sync-puck-registry.ts` for syncing
+the component registry from CI, with a sample workflow in `ci-examples/`. It is inert until you
+wire it up; see the comments in those files for setup.
+
+## Troubleshooting
+
+**Module resolution errors.** Next.js needs the P1 packages transpiled. Verify
+`next.config.mjs` includes:
+
+```js
+transpilePackages: [
+  "@pantheon-systems/css-client",
+  "@pantheon-systems/puck-css",
+  "@pantheon-systems/p1-next-sdk",
+],
+```
+
+## Resources
+
+- [Pantheon documentation](https://docs.pantheon.io)
+- [Puck editor docs](https://puckeditor.com)
+- [Next.js docs](https://nextjs.org/docs)
+
+## License
+
+MIT

package/lib/cli.js

@@ -106,7 +106,7 @@ export async function runCLI() {
     if (error.code !== 'EEXIST') {
       try {
         fs.rmSync(targetDir, { recursive: true, force: true });
-      } catch (cleanupError) {
+      } catch {
         // Ignore cleanup errors
       }
     }

package/lib/messages.js

@@ -6,7 +6,7 @@ export function showWelcome() {
   console.log(pc.bold(pc.cyan('└─────────────────────────────────────────┘\n')));
 }
 
-export function showSuccess(projectName, projectPath, packageManager) {
+export function showSuccess(projectName, _projectPath, packageManager) {
   console.log(pc.green('\n✔ Project created successfully!\n'));
   console.log(`${pc.bold('Next steps:')}\n`);
   console.log(`  ${pc.cyan('cd')} ${projectName}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.8.0",
+  "version": "0.11.0",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/pantheon-systems/puck-css-integration.git",
+    "url": "git+https://github.com/pantheon-systems/p1-platform.git",
     "directory": "packages/create-p1-starter-kit"
   },
   "keywords": [
@@ -33,20 +33,26 @@
     "node": ">=24.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "eslint": "^9.27.0",
     "isomorphic-dompurify": "^3.18.0",
     "react": "^19.2.5",
     "vitest": "^4.1.5",
-    "@pantheon-systems/puck-css": "0.8.0",
-    "@pantheon-systems/css-client": "0.8.0"
+    "@pantheon-systems/css-client": "0.11.0",
+    "@pantheon-systems/eslint-config": "0.1.0",
+    "@pantheon-systems/puck-css": "0.11.0"
   },
   "dependencies": {
     "@clack/prompts": "^1.5.1",
     "picocolors": "^1.1.1"
   },
   "license": "MIT",
+  "homepage": "https://github.com/pantheon-systems/p1-platform/tree/main/packages/create-p1-starter-kit",
   "scripts": {
     "build": "node scripts/build-template.js",
+    "clean": "rm -rf template node_modules/.vite",
+    "lint": "eslint index.js lib scripts",
+    "lint:fix": "eslint index.js lib scripts --fix",
     "test": "vitest run"
   }
 }

package/template/.env.example

@@ -1,13 +1,28 @@
-PCC_SITE_ID=your-site-id
-PCC_TOKEN=your-token
-
 # --- P1 backend ---
-# NEXT_PUBLIC_CSS_BASE_URL defaults to https://ccr.p1.pantheon for production.
-# Override for staging, local, or sandbox deployments:
-# NEXT_PUBLIC_CSS_BASE_URL=https://staging.example.com
 NEXT_PUBLIC_CSS_SITE_ID=site-123
 CSS_API_KEY=your-api-key
 
+# Public URL of THIS environment, used to build the post-login redirect.
+# Read at runtime (not a NEXT_PUBLIC_ build-time var), so redeploy after setting it.
+#
+# Set it per environment — each of dev/test/live/multidev needs its own value
+# matching its own public URL. A site-level value that every environment inherits
+# sends logins to the wrong origin, silently.
+#   terminus secret:site:set <site>.live P1_SITE_URL "https://www.yoursite.com" \
+#     --type=env --scope=web
+#
+# Can be left unset once this site's origins are registered in the P1 dashboard:
+# the browser then states its origin and the backend verifies it against that
+# list, which one wildcard entry covers for every environment. Unset and
+# unregistered falls back to the request origin, which is an internal hostname on
+# Pantheon — that is the cause of post-login redirects to localhost.
+# P1_SITE_URL=https://www.yoursite.com
+
+# --- P1 backend URL (optional) ---
+# P1 backend defaults to https://ccr.p1.pantheon.io for production.
+# Override for staging, local, or sandbox deployments:
+# NEXT_PUBLIC_CSS_BASE_URL=https://staging.ccr.p1.pantheon.io
+
 # --- P1 Admin Dashboard (optional) ---
 # Override the default dashboard URL (https://content.pantheon.io)
 # NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL=https://staging.content.pantheon.io
@@ -31,3 +46,9 @@ CSS_API_KEY=your-api-key
 # Defaults to the production origin (https://media.p1.pantheon.io). Override
 # for staging, sandbox, or local dev.
 # NEXT_PUBLIC_MEDIA_BASE_URL=https://staging.media.p1.pantheon.io
+
+# --- Content Publisher (optional) ---
+# Add your secrets to connect to Content Publisher collections and
+# automatically pull documents from there into your P1 site.
+# PCC_SITE_ID=your-content-publisher-collection-id
+# PCC_TOKEN=your-content-publisher-access-token

package/template/__tests__/ai-generate.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from "vitest";
+import type { DraftRequest, DraftRequestChannel } from "@pantheon-systems/p1-ai-chat";
+import { createGenerateWithAIHandler } from "../lib/chatbot-flag/ai-generate";
+
+/**
+ * A recording stand-in for the request channel. The real channel is unit-tested in
+ * `p1-ai-chat`; here we only assert what the handler publishes. Using a fake also
+ * keeps this test from importing the package's runtime (which pulls in CSS).
+ */
+function fakeChannel(): { channel: DraftRequestChannel; published: DraftRequest[] } {
+  const published: DraftRequest[] = [];
+  const channel: DraftRequestChannel = {
+    publish: (request) => {
+      published.push(request);
+    },
+    subscribe: () => () => {},
+    getLatest: () => published[published.length - 1] ?? null,
+    clearLatest: () => {},
+  };
+  return { channel, published };
+}
+
+describe("createGenerateWithAIHandler", () => {
+  it("returns undefined when the chatbot is disabled (leaves the modal tile a placeholder)", () => {
+    const { channel } = fakeChannel();
+    expect(createGenerateWithAIHandler(channel, false)).toBeUndefined();
+  });
+
+  it("asks for the page to be created, with the title and path the dialog collected", () => {
+    const { channel, published } = fakeChannel();
+
+    const handler = createGenerateWithAIHandler(channel, true);
+    // Narrowed with a throw rather than a `!`: the return type is optional because the
+    // handler is undefined when the chatbot is disabled, and the lint rule forbids
+    // asserting that away. This keeps the "must be defined when enabled" claim asserted.
+    if (!handler) throw new Error("handler must be defined when the chatbot is enabled");
+    handler("a launch page", { path: "launch", title: "Launch" });
+
+    // `create-page`, not `fill-page`: nothing exists yet, because the template the page starts
+    // from is settled in the chat first and can only be applied as the page is created.
+    expect(published).toEqual([
+      { kind: "create-page", brief: "a launch page", page: { path: "launch", title: "Launch" } },
+    ]);
+  });
+
+  it("keeps the nested path the dialog built from a template's route", () => {
+    const { channel, published } = fakeChannel();
+    const handler = createGenerateWithAIHandler(channel, true);
+    if (!handler) throw new Error("handler must be defined when the chatbot is enabled");
+
+    handler("draft", { path: "resources/guide", title: "Guide" });
+
+    expect(published[0]).toEqual({
+      kind: "create-page",
+      brief: "draft",
+      page: { path: "resources/guide", title: "Guide" },
+    });
+  });
+
+  // The dialog's title field can be left empty; the agent draws one from the brief instead.
+  it("sends an empty title rather than omitting it", () => {
+    const { channel, published } = fakeChannel();
+    const handler = createGenerateWithAIHandler(channel, true);
+    if (!handler) throw new Error("handler must be defined when the chatbot is enabled");
+
+    handler("draft", { path: "launch" });
+
+    expect(published[0]).toEqual({
+      kind: "create-page",
+      brief: "draft",
+      page: { path: "launch", title: "" },
+    });
+  });
+});

package/template/__tests__/auth-route.test.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
 import { readFileSync } from "fs";
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
+import { describe, expect, it } from "vitest";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const appDir = resolve(__dirname, "..");

package/template/__tests__/chatbot-flag-wiring.test.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
 import { readFileSync } from "fs";
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
+import { describe, expect, it } from "vitest";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const appDir = resolve(__dirname, "..");
@@ -29,6 +29,26 @@ describe("editor-client gates the chatbot behind the p1-chatbot flag", () => {
   });
 });
 
+describe("editor-client wires Generate with AI to the chat sidebar", () => {
+  const content = readFileSync(
+    resolve(appDir, "app/p1/(editor)/[[...p1]]/editor-client.tsx"),
+    "utf-8",
+  );
+
+  it("uses the shared (singleton) agent request channel", () => {
+    expect(content).toContain("getDraftRequestChannel");
+  });
+
+  it("passes the request channel to the chat plugin", () => {
+    expect(content).toMatch(/createAIChatPlugin\(\{[^}]*draftRequests/);
+  });
+
+  it("wires onGenerateWithAI to publish onto the channel via the handler", () => {
+    expect(content).toContain("onGenerateWithAI");
+    expect(content).toContain("createGenerateWithAIHandler");
+  });
+});
+
 describe("chatbot flag provider is a client-side LaunchDarkly gate", () => {
   const content = readFileSync(
     resolve(appDir, "components/ChatbotFlagProvider.tsx"),

package/template/__tests__/editor-integration.test.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
 import { readFileSync } from "fs";
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
+import { describe, expect, it } from "vitest";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const appDir = resolve(__dirname, "..");

package/template/__tests__/editor-route-group.test.ts

@@ -4,10 +4,10 @@
  * future /p1/settings). This structure replaces the old NON_EDITOR_ROUTES
  * opt-out list: siblings stay editor-free by construction, not by enumeration.
  */
-import { describe, expect, it } from "vitest";
 import { existsSync, readFileSync } from "fs";
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
+import { describe, expect, it } from "vitest";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const appDir = resolve(__dirname, "..");

package/template/__tests__/image-block.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { isValidElement, type ReactNode } from "react";
+
+const SRC = "https://example.com/photo.jpg";
+
+// react-dom is not available where the scaffolded template runs its tests, so
+// inspect the element tree the block returns rather than rendering it.
+function findImg(node: ReactNode): Record<string, unknown> | null {
+  if (node == null || typeof node !== "object") return null;
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findImg(child);
+      if (found) return found;
+    }
+    return null;
+  }
+  if (!isValidElement(node)) return null;
+  const props = (node.props ?? {}) as Record<string, unknown>;
+  if (node.type === "img") return props;
+  return findImg(props.children as ReactNode);
+}
+
+describe("imageBlock", () => {
+  it("exposes a loading field defaulting to lazy", async () => {
+    const { imageBlock } = await import("../components/puck/image-block");
+    expect(imageBlock.fields.loading.type).toBe("radio");
+    expect(imageBlock.fields.loading.options.map((o) => o.value)).toEqual([
+      "lazy",
+      "eager",
+    ]);
+    expect(imageBlock.defaultProps.loading).toBe("lazy");
+  });
+
+  it("lazy-loads even when the prop is missing (documents saved before the field existed)", async () => {
+    const { imageBlock } = await import("../components/puck/image-block");
+    const img = findImg(imageBlock.render({ src: SRC, alt: "A photo" }));
+    expect(img?.loading).toBe("lazy");
+    expect(img?.decoding).toBe("async");
+  });
+
+  it("renders eager when the editor chooses it", async () => {
+    const { imageBlock } = await import("../components/puck/image-block");
+    const img = findImg(
+      imageBlock.render({ src: SRC, alt: "A photo", loading: "eager" }),
+    );
+    expect(img?.loading).toBe("eager");
+  });
+});

package/template/__tests__/page-seo-meta-templates.test.ts

@@ -0,0 +1,145 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+
+vi.mock("../lib/remote-datasource-fetchers", () => ({
+  REMOTE_DATASOURCE_FETCHERS: {},
+}));
+
+vi.mock("@pantheon-systems/p1-next-sdk/server", () => ({
+  loadRouteTemplateKeys: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("@pantheon-systems/puck-css/server", () => ({
+  extractReferencedDatasourceIds: vi.fn().mockReturnValue([]),
+  loadRemoteDatasourceContext: vi.fn().mockResolvedValue({}),
+  resolveStringTemplates: vi.fn(async (input: string) =>
+    input
+      .replace(/\{\{\s*name\s*\}\}/g, "World")
+      .replace(/\{\{\s*slug\s*\}\}/g, "widgets"),
+  ),
+}));
+
+import * as puckServer from "@pantheon-systems/puck-css/server";
+import { resolvePageMetadata } from "../lib/page-seo";
+
+/**
+ * `{{ }}` interpolation on the metadata fields.
+ *
+ * Loading the datasource context is a network round trip, so it happens only
+ * when something on the page actually carries a template — and once, however
+ * many fields do.
+ *
+ * The two fixed-vocabulary fields are deliberately excluded: their values are
+ * validated against a union, so a template could only ever produce a value the
+ * renderer rejects.
+ */
+
+type PageData = Parameters<typeof resolvePageMetadata>[0]["pageData"];
+
+function pageWithRootProps(props: Record<string, unknown>): PageData {
+  return { root: { props }, content: [] } as unknown as PageData;
+}
+
+const resolve = (props: Record<string, unknown>) =>
+  resolvePageMetadata({
+    pageData: pageWithRootProps(props),
+    path: "/q3",
+  });
+
+const og = (m: Awaited<ReturnType<typeof resolvePageMetadata>>) =>
+  (m.openGraph ?? {}) as Record<string, unknown>;
+const tw = (m: Awaited<ReturnType<typeof resolvePageMetadata>>) =>
+  (m.twitter ?? {}) as Record<string, unknown>;
+
+describe("resolvePageMetadata — {{ }} in _meta", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("resolves templates in the free-text metadata fields", async () => {
+    const meta = await resolve({
+      title: "Q3",
+      _meta: {
+        ogTitle: "Hello {{ name }}",
+        ogDescription: "All about {{ name }}",
+        twitterTitle: "{{ name }} on X",
+        ogLocale: "{{ name }}",
+      },
+    });
+
+    expect(og(meta).title).toBe("Hello World");
+    expect(og(meta).description).toBe("All about World");
+    expect(tw(meta).title).toBe("World on X");
+    expect(og(meta).locale).toBe("World");
+  });
+
+  it("resolves templates in the image URLs", async () => {
+    const meta = await resolve({
+      title: "Q3",
+      _meta: {
+        ogImage: "https://cdn.example/{{ slug }}.png",
+        twitterImage: "https://cdn.example/{{ slug }}-x.png",
+      },
+    });
+
+    expect(og(meta).images).toBe("https://cdn.example/widgets.png");
+    expect(tw(meta).images).toBe("https://cdn.example/widgets-x.png");
+  });
+
+  it("leaves the fixed-vocabulary fields alone", async () => {
+    const meta = await resolve({
+      title: "Q3",
+      _meta: { ogType: "{{ name }}", twitterCard: "{{ name }}", ogTitle: "Set" },
+    });
+
+    // Unresolved and unrecognised, so the union check falls back.
+    expect(og(meta).type).toBe("website");
+    expect(tw(meta).card).toBe("summary");
+    for (const call of vi.mocked(puckServer.resolveStringTemplates).mock.calls) {
+      expect(call[0]).not.toBe("{{ name }}");
+    }
+  });
+
+  it("loads the datasource context once, however many fields template", async () => {
+    await resolve({
+      title: "Hello {{ name }}",
+      description: "About {{ name }}",
+      _meta: { ogTitle: "{{ name }}", twitterTitle: "{{ name }}" },
+    });
+
+    expect(puckServer.loadRemoteDatasourceContext).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not touch the network when nothing carries a template", async () => {
+    const meta = await resolve({
+      title: "Q3 Launch Recap",
+      _meta: { ogTitle: "The launch, in numbers" },
+    });
+
+    expect(puckServer.loadRemoteDatasourceContext).not.toHaveBeenCalled();
+    expect(puckServer.resolveStringTemplates).not.toHaveBeenCalled();
+    expect(og(meta).title).toBe("The launch, in numbers");
+  });
+
+  it("resolves only the fields that carry a template", async () => {
+    await resolve({
+      title: "Q3",
+      _meta: { ogTitle: "Hello {{ name }}", ogDescription: "Static" },
+    });
+
+    expect(puckServer.resolveStringTemplates).toHaveBeenCalledTimes(1);
+    expect(puckServer.resolveStringTemplates).toHaveBeenCalledWith("Hello {{ name }}", {});
+  });
+
+  it("resolves a metadata field when the title carries no template", async () => {
+    // The context load used to be gated on title/description alone, so a
+    // template that appeared only in _meta would never have been resolved.
+    const meta = await resolve({ title: "Q3", _meta: { ogTitle: "Hello {{ name }}" } });
+
+    expect(og(meta).title).toBe("Hello World");
+  });
+
+  it("still derives an unset field from the resolved title", async () => {
+    const meta = await resolve({ title: "Hello {{ name }}", _meta: { ogTitle: "" } });
+
+    expect(og(meta).title).toBe("Hello World");
+    expect(tw(meta).title).toBe("Hello World");
+  });
+});

package/template/__tests__/page-seo-meta.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+
+vi.mock("../lib/remote-datasource-fetchers", () => ({
+  REMOTE_DATASOURCE_FETCHERS: {},
+}));
+
+vi.mock("@pantheon-systems/p1-next-sdk/server", () => ({
+  loadRouteTemplateKeys: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("@pantheon-systems/puck-css/server", () => ({
+  extractReferencedDatasourceIds: vi.fn().mockReturnValue([]),
+  loadRemoteDatasourceContext: vi.fn().mockResolvedValue({}),
+  resolveStringTemplates: vi.fn(async (input: string) =>
+    input.replace(/\{\{\s*name\s*\}\}/g, "World"),
+  ),
+}));
+
+import { resolvePageMetadata } from "../lib/page-seo";
+
+/**
+ * `root.props._meta` reaches <head> through resolvePageMetadata.
+ */
+
+type PageData = Parameters<typeof resolvePageMetadata>[0]["pageData"];
+
+function pageWithRootProps(props: Record<string, unknown>): PageData {
+  return { root: { props }, content: [] } as unknown as PageData;
+}
+
+const og = (m: Awaited<ReturnType<typeof resolvePageMetadata>>) =>
+  (m.openGraph ?? {}) as Record<string, unknown>;
+const tw = (m: Awaited<ReturnType<typeof resolvePageMetadata>>) =>
+  (m.twitter ?? {}) as Record<string, unknown>;
+
+describe("resolvePageMetadata — _meta", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("carries authored _meta through to the og and twitter tags", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "Q3 Launch Recap",
+        description: "How the launch went.",
+        _meta: {
+          ogTitle: "The launch, in numbers",
+          ogImage: "https://cdn.example/hero.jpg",
+          ogType: "article",
+          twitterTitle: "Launch, for X",
+        },
+      }),
+      path: "/q3",
+    });
+
+    expect(og(meta).title).toBe("The launch, in numbers");
+    expect(og(meta).images).toBe("https://cdn.example/hero.jpg");
+    expect(og(meta).type).toBe("article");
+    expect(tw(meta).title).toBe("Launch, for X");
+    expect(tw(meta).card).toBe("summary_large_image");
+  });
+
+  it("inherits from title and description when _meta is absent", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "Q3 Launch Recap",
+        description: "How the launch went.",
+      }),
+      path: "/q3",
+    });
+
+    expect(og(meta).title).toBe("Q3 Launch Recap");
+    expect(og(meta).description).toBe("How the launch went.");
+    expect(og(meta)).not.toHaveProperty("images");
+  });
+
+  it("still resolves {{ }} in the page title alongside authored _meta", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "Hello {{ name }}",
+        _meta: { ogDescription: "Static description." },
+      }),
+      path: "/greet",
+    });
+
+    expect(meta.title).toBe("Hello World");
+    expect(og(meta).description).toBe("Static description.");
+  });
+
+  it("ignores the editor's default title boilerplate when deriving og:title", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({ title: "My Puck Editor" }),
+      path: "/new",
+    });
+
+    expect(meta.title).toBeUndefined();
+    expect(og(meta)).not.toHaveProperty("title");
+  });
+});