create-ailk 0.27.0 → 0.28.1

package/templates/apps/web/app/[locale]/careers/[slug]/page.tsx

@@ -1,5 +1,5 @@
 // JobPosting detail page. Reads the JobPosting MDX for the given slug, renders via
-// next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
 // Careers list at /careers links here; each job posting lives at /careers/<slug>.
 //
 // Under the posting, inside <main>, an Apply button (#8849 D8) opens
@@ -9,7 +9,11 @@
 // form this page used to draw under `#apply`. The posting's JSON-LD
 // ApplyAction targets the same URL (#8849 D3). The page makes no hub read.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
 import { Button, Container, Link, localeHref } from "@working-theory/ui";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
@@ -32,12 +36,25 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
+  // A page that composes `sections[]` renders them (JSON-LD is built from
+  // the same sections); a prose page renders its MDX body — the rule
+  // /vs/[slug] applies (#10122).
+  const source = await (getMdxSource ?? loadMdxSource)(
+    "JobPosting",
+    slug,
+    locale,
+  );
+  const composed =
+    source !== null &&
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
+      0;
   const t = await getTranslations({ locale, namespace: "careers" });
   return renderPage({
     type: "JobPosting",
     slug,
     locale,
-    bodyMode: "mdx-body",
+    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
     trailing: (
       <Container className="pb-section">
         <Button asChild size="big">

package/templates/apps/web/app/[locale]/careers/__tests__/apply.actions.test.ts

@@ -10,6 +10,13 @@ import {
 } from "../../../../src/lib/rate-limit";
 import { captureLeadAction } from "../[slug]/apply.actions";
 
+// #9255 — the write bot check's verdict. `checkBotId` reads Vercel's
+// request context, which jest has none of, so every case decides it here.
+const checkBotIdMock = jest.fn();
+jest.mock("botid/server", () => ({
+  checkBotId: (...args: unknown[]) => checkBotIdMock(...args),
+}));
+
 jest.mock("@working-theory/api-client", () => ({
   leads: { submit: jest.fn() },
   visitorForwardHeaders: jest.requireActual("@working-theory/api-client")
@@ -80,6 +87,23 @@ afterEach(() => {
 });
 
 describe("captureLeadAction on a job page (#8746 AC-5)", () => {
+  // On Vercel, where the edge-set address is read (#9967 D1); the bot check
+  // has its own suite below.
+  const LIMIT_ENV_KEYS = ["VERCEL", "AILK_BOT_CHECK"] as const;
+  const priorLimitEnv = new Map(
+    LIMIT_ENV_KEYS.map((name) => [name, process.env[name]]),
+  );
+  beforeEach(() => {
+    process.env.VERCEL = "1";
+    process.env.AILK_BOT_CHECK = "off";
+  });
+  afterEach(() => {
+    for (const [name, value] of priorLimitEnv) {
+      if (value === undefined) delete process.env[name];
+      else process.env[name] = value;
+    }
+  });
+
   it("writes one flow:job-application lead with name = first + last and the hidden job slug", async () => {
     const result = await captureLeadAction(JOB, null, form(VALID));
 
@@ -197,7 +221,7 @@ describe("captureLeadAction on a job page (#8746 AC-5)", () => {
   it("shares /contact's per-visitor bucket", async () => {
     mockHeaders.mockResolvedValue({
       get: (name: string) =>
-        name === "x-forwarded-for" ? "203.0.113.7" : null,
+        name === "x-vercel-forwarded-for" ? "203.0.113.7" : null,
     });
     for (let i = 0; i < 30; i += 1)
       checkRateLimit("contact:203.0.113.7", 30, 10 * 60 * 1000);
@@ -247,7 +271,7 @@ describe("captureLeadAction on a job page (#8746 AC-5)", () => {
   it("limits one visitor to 30 applications per 10 minutes", async () => {
     mockHeaders.mockResolvedValue({
       get: (name: string) =>
-        name === "x-forwarded-for" ? "203.0.113.9" : null,
+        name === "x-vercel-forwarded-for" ? "203.0.113.9" : null,
     });
     for (let i = 0; i < 30; i += 1) {
       expect(await captureLeadAction(JOB, null, form(VALID))).toEqual({
@@ -259,6 +283,27 @@ describe("captureLeadAction on a job page (#8746 AC-5)", () => {
     });
     expect(mockSubmit).toHaveBeenCalledTimes(30);
   });
+
+  it("charges a visitor with no readable address /contact's shared bucket, never skips it (#9967)", async () => {
+    // A client-sent x-forwarded-for is no address: it changes on every post.
+    let n = 0;
+    mockHeaders.mockImplementation(async () => {
+      n += 1;
+      return {
+        get: (name: string) =>
+          name === "x-forwarded-for" ? `10.0.${n >> 8}.${n & 255}` : null,
+      };
+    });
+    for (let i = 0; i < 300; i += 1) {
+      expect(await captureLeadAction(JOB, null, form(VALID))).toEqual({
+        kind: "success",
+      });
+    }
+    expect(await captureLeadAction(JOB, null, form(VALID))).toMatchObject({
+      kind: "error",
+    });
+    expect(mockSubmit).toHaveBeenCalledTimes(300);
+  });
 });
 
 describe("the thank-you's account link (#8771 AC-6)", () => {
@@ -317,3 +362,136 @@ describe("the thank-you's account link (#8771 AC-6)", () => {
     expect(mockSubmit).not.toHaveBeenCalled();
   });
 });
+
+// #9255 D4 — the write bot check runs after the honeypot, the consent and
+// the schema, immediately before the write (spec
+// docs/specs/9255-an-edge-bot-challenge-in-spec.md §5.1 AC-2).
+describe("captureLeadAction on a job page — the write bot check (#9255)", () => {
+  const BOT = { isHuman: false, isBot: true, isVerifiedBot: false, bypassed: false };
+  const HUMAN = { ...BOT, isHuman: true, isBot: false };
+  const BOT_ENV_KEYS = ["VERCEL", "AILK_BOT_CHECK", "AILK_BOOKING_BOT_CHECK"] as const;
+  const priorBotEnv = new Map(BOT_ENV_KEYS.map((name) => [name, process.env[name]]));
+
+  let botLogSpies: jest.SpyInstance[] = [];
+
+  beforeEach(() => {
+    checkBotIdMock.mockReset();
+    for (const name of BOT_ENV_KEYS) delete process.env[name];
+    process.env.VERCEL = "1";
+    botLogSpies = [
+      jest.spyOn(console, "warn").mockImplementation(() => undefined),
+      jest.spyOn(console, "error").mockImplementation(() => undefined),
+    ];
+  });
+
+  afterEach(() => {
+    for (const [name, value] of priorBotEnv) {
+      if (value === undefined) delete process.env[name];
+      else process.env[name] = value;
+    }
+    for (const spy of botLogSpies) spy.mockRestore();
+  });
+
+  it("a bot gets the generic error, and nothing is sent", async () => {
+    checkBotIdMock.mockResolvedValue(BOT);
+    expect(await captureLeadAction(JOB, null, form(VALID))).toStrictEqual({
+      kind: "error",
+      message: "Something went wrong, please try again.",
+    });
+    expect(checkBotIdMock).toHaveBeenCalledTimes(1);
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it("a check that fails is unavailable, and nothing is sent", async () => {
+    checkBotIdMock.mockRejectedValue(new Error("boom"));
+    expect(await captureLeadAction(JOB, null, form(VALID))).toStrictEqual({ kind: "unavailable" });
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it("a human sends exactly what the check off sends", async () => {
+    checkBotIdMock.mockResolvedValue(HUMAN);
+    delete process.env.VERCEL;
+    await captureLeadAction(JOB, null, form(VALID));
+    process.env.VERCEL = "1";
+    expect(await captureLeadAction(JOB, null, form(VALID))).toEqual({ kind: "success" });
+    expect(checkBotIdMock).toHaveBeenCalledTimes(1);
+    expect(mockSubmit).toHaveBeenCalledTimes(2);
+    expect(mockSubmit.mock.calls[1]).toEqual(mockSubmit.mock.calls[0]);
+  });
+
+  it("a filled honeypot answers success with no check", async () => {
+    checkBotIdMock.mockResolvedValue(BOT);
+    expect(await captureLeadAction(JOB, null, form({ ...VALID, ailk_hp: "spam" }))).toEqual({
+      kind: "success",
+    });
+    expect(checkBotIdMock).not.toHaveBeenCalled();
+  });
+
+  it("a post without consent answers the consent error with no check", async () => {
+    checkBotIdMock.mockResolvedValue(BOT);
+    const { consent: _consent, ...unticked } = VALID;
+    expect(await captureLeadAction(JOB, null, form(unticked))).toEqual({
+      kind: "error",
+      fieldErrors: { consent: expect.any(String) },
+    });
+    expect(checkBotIdMock).not.toHaveBeenCalled();
+  });
+});
+
+describe("captureLeadAction records the posting's named flow (#10054 D6, AC-7)", () => {
+  const ENV_KEYS = ["VERCEL", "AILK_BOT_CHECK"] as const;
+  const prior = new Map(ENV_KEYS.map((name) => [name, process.env[name]]));
+  beforeEach(() => {
+    process.env.VERCEL = "1";
+    process.env.AILK_BOT_CHECK = "off";
+  });
+  afterEach(() => {
+    for (const [name, value] of prior) {
+      if (value === undefined) delete process.env[name];
+      else process.env[name] = value;
+    }
+  });
+
+  const NAMED = { job: "writer", flow: "writer-application" };
+
+  it("writes applicationFlow beside job, keeping the Job application source and consent", async () => {
+    expect(await captureLeadAction(NAMED, null, form(VALID))).toEqual({ kind: "success" });
+    const body = submitted();
+    expect(body.source).toBe("flow:job-application");
+    expect(body.consent).toBe(true);
+    expect(body.payload).toEqual({
+      name: "Ada Lovelace",
+      first_name: "Ada",
+      last_name: "Lovelace",
+      job: "writer",
+      applicationFlow: "writer-application",
+      page: "careers",
+    });
+  });
+
+  it("a form field named applicationFlow does not override it", async () => {
+    await captureLeadAction(NAMED, null, form({ ...VALID, applicationFlow: "other-flow" }));
+    expect(submitted().payload["applicationFlow"]).toBe("writer-application");
+  });
+
+  it("a string posting writes no applicationFlow, even from a form field", async () => {
+    await captureLeadAction(JOB, null, form({ ...VALID, applicationFlow: "other-flow" }));
+    expect(submitted().payload).not.toHaveProperty("applicationFlow");
+  });
+
+  it.each([
+    [{ job: "writer", flow: "Bad Flow" }],
+    [{ job: "Bad", flow: "x" }],
+    [{ job: "writer", flow: "a".repeat(60) }],
+    [{ job: "writer" }],
+  ])("%p answers the generic error with nothing sent", async (posting) => {
+    const result = await captureLeadAction(
+      // eslint-disable-next-line no-restricted-syntax -- a malformed bound posting is exactly a value of the wrong shape
+      posting as unknown as { job: string; flow: string },
+      null,
+      form(VALID),
+    );
+    expect(result).toMatchObject({ kind: "error", message: expect.any(String) });
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/careers/__tests__/careers-set.test.tsx

@@ -70,7 +70,7 @@ const getMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>
       body: "",
     };
   if (type === "JobPosting" && slug === "writer")
-    return { frontmatter: WRITER, body: "The writer role." };
+    return { frontmatter: WRITER, body: "# Writer\n\nThe writer role." };
   return null;
 });
 const getMdxSlugs = jest.fn().mockResolvedValue(["writer"]);
@@ -117,7 +117,11 @@ describe("a writer posting renders through the careers set (#8849 AC-7)", () =>
         getMdxSource,
       }),
     );
-    expect(screen.getByRole("heading", { level: 1, name: "Writer" })).toBeTruthy();
+    // #7495 — the posting's body owns its H1; MDXRemote is mocked, so the
+    // body's `# Writer` arrives as its source.
+    expect(screen.getByTestId("mdx-rendered").textContent).toBe(
+      "# Writer\n\nThe writer role.",
+    );
     const cta = screen.getByTestId("job-apply-cta");
     expect(cta.getAttribute("href")).toBe("/careers/writer/apply");
 

package/templates/apps/web/app/[locale]/careers/__tests__/job-apply-page.test.tsx

@@ -401,6 +401,128 @@ describe("a submission from the Free apply page lands as a job application lead
   });
 });
 
+describe("the Free apply page runs the flow its posting names (#10054 D4, D6)", () => {
+  const NAMED = "writer-application";
+
+  /** The seed, renamed, with a portfolio field on step 1 (`first_name`, `last_name`, `email` kept). */
+  function writerConfig(): FlowConfig {
+    const config = JSON.parse(JSON.stringify(jobApplicationFlowConfig)) as FlowConfig;
+    config.slug = NAMED;
+    (config.steps[0] as FieldStep).fields.splice(3, 0, {
+      name: "portfolio_url",
+      inputType: "url",
+      required: false,
+      copy: { label: { en: "Portfolio URL" } },
+    });
+    return config;
+  }
+
+  function namePosting(applicationFlow?: string) {
+    mockPostingSource.mockImplementation(async (_type, slug) =>
+      slug === JOB
+        ? {
+            ...jobSource,
+            frontmatter: {
+              ...jobSource.frontmatter,
+              ...(applicationFlow !== undefined && { applicationFlow }),
+            },
+          }
+        : null,
+    );
+  }
+
+  /** `flows.get` answers `named` for the posting's flow, the seed for job-application. */
+  function serve(named: () => Promise<unknown>) {
+    mockFlowsGet.mockImplementation(async (slug: string) =>
+      slug === NAMED
+        ? named()
+        : { ok: true, status: 200, body: jobApplicationFlowConfig },
+    );
+  }
+
+  async function submit(): Promise<{ source: string; consent?: unknown; payload: Record<string, unknown> }> {
+    for (const [name, value] of Object.entries({
+      first_name: "Ada",
+      last_name: "Lovelace",
+      email: "ada@example.com",
+    })) {
+      fireEvent.change(screen.getByTestId(`field-${name}`), { target: { value } });
+    }
+    fireEvent.click(screen.getByTestId("contact-consent"));
+    await act(async () => {
+      fireEvent.submit(screen.getByTestId("lead-capture-form"));
+    });
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(1));
+    return mockSubmit.mock.calls[0][0];
+  }
+
+  let warn: jest.SpyInstance;
+  beforeEach(() => {
+    warn = jest.spyOn(console, "warn").mockImplementation(() => undefined);
+  });
+  afterEach(() => warn.mockRestore());
+
+  it("AC-5 — renders the named flow's step 1 and records the posting and the flow", async () => {
+    namePosting(NAMED);
+    serve(async () => ({ ok: true, status: 200, body: writerConfig() }));
+    await renderApplyPage();
+    expect(fieldNames()).toContain("portfolio_url");
+    expect(mockFlowsGet).not.toHaveBeenCalledWith("job-application");
+    const body = await submit();
+    expect(body.source).toBe("flow:job-application");
+    expect(body.consent).toBe(true);
+    expect(body.payload["job"]).toBe(JOB);
+    expect(body.payload["applicationFlow"]).toBe(NAMED);
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ["absent", async () => ({ ok: false, status: 404, body: null })],
+    [
+      "unmappable",
+      async () => {
+        const config = writerConfig();
+        const step = config.steps[0] as FieldStep;
+        step.fields = step.fields.filter((f) => f.name !== "last_name");
+        return { ok: true, status: 200, body: config };
+      },
+    ],
+  ])("AC-6 — an %s flow renders the Job application, posts no applicationFlow and warns once", async (reason, named) => {
+    namePosting(NAMED);
+    serve(named);
+    await renderApplyPage();
+    expect(fieldNames()).toEqual(["first_name", "last_name", "email", "phone"]);
+    expect(warn).toHaveBeenCalledTimes(1);
+    const logged = JSON.stringify(warn.mock.calls[0]);
+    expect(logged).toContain(JOB);
+    expect(logged).toContain(NAMED);
+    expect(logged).toContain(reason);
+    const body = await submit();
+    expect(body.payload).not.toHaveProperty("applicationFlow");
+    expect(body.payload["job"]).toBe(JOB);
+  });
+
+  it("AC-6 — a named flow whose read throws renders the Job application and warns nothing", async () => {
+    namePosting(NAMED);
+    serve(async () => {
+      throw new Error("down");
+    });
+    await renderApplyPage();
+    expect(fieldNames()).toEqual(["first_name", "last_name", "email", "phone"]);
+    expect(warn).not.toHaveBeenCalled();
+    const body = await submit();
+    expect(body.payload).not.toHaveProperty("applicationFlow");
+  });
+
+  it("AC-6 — a posting naming no flow posts a payload with no applicationFlow key", async () => {
+    await renderApplyPage();
+    const body = await submit();
+    expect(body.payload).not.toHaveProperty("applicationFlow");
+    for (const call of mockFlowsGet.mock.calls) expect(call[0]).toBe("job-application");
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+
 describe("the /careers index links to each job and carries no form (#8746 D1, #8849 D10)", () => {
   it("renders the list with no apply form and reads no magnet", async () => {
     const element = await CareersPage({

package/templates/apps/web/app/[locale]/careers/__tests__/page-renderer-migration.test.tsx

@@ -158,7 +158,7 @@ describe("careers/[slug]/page — snapshot regression", () => {
     // #8849 D3, D8 — the JobPosting's ApplyAction targets the apply page, and
     // the page passes renderPage an Apply button inside <main>.
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform.","potentialAction":{"@type":"ApplyAction","target":"http://localhost:3000/en/careers/senior-engineer/apply"}}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Senior Engineer</h1><p data-testid="senior-engineer-description" class="mt-block-tight text-lead">Build the AILK platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">mdx-body-content</div></div></article></div></div></div><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 pb-section"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big)" href="/careers/senior-engineer/apply" data-testid="job-apply-cta">Apply for this role</a></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform.","potentialAction":{"@type":"ApplyAction","target":"http://localhost:3000/en/careers/senior-engineer/apply"}}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">mdx-body-content</div></div></article></div></div></div><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 pb-section"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big)" href="/careers/senior-engineer/apply" data-testid="job-apply-cta">Apply for this role</a></div></main>"`,
     );
   });
 

package/templates/apps/web/app/[locale]/case-studies/[slug]/page.tsx

@@ -1,7 +1,11 @@
 // Case Study detail page. Reads the CaseStudy MDX for the given slug, renders via
-// next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
 import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
@@ -22,11 +26,24 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
+  // A page that composes `sections[]` renders them (JSON-LD is built from
+  // the same sections); a prose page renders its MDX body — the rule
+  // /vs/[slug] applies (#10122).
+  const source = await (getMdxSource ?? loadMdxSource)(
+    "CaseStudy",
+    slug,
+    locale,
+  );
+  const composed =
+    source !== null &&
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
+      0;
   return renderPage({
     type: "CaseStudy",
     slug,
     locale,
-    bodyMode: "mdx-body",
+    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

package/templates/apps/web/app/[locale]/case-studies/__tests__/hub-children.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * Hub child cards (#10121) for /case-studies. The shared cases live in
+ * `lib/__tests__/hub-children.fixtures.ts`; this file sits beside the route so
+ * a scaffold without /case-studies drops it with the route (#10157).
+ */
+const mockRenderPage = jest.fn(async (..._args: unknown[]) => "<rendered/>");
+
+jest.mock("@working-theory/page-renderer", () => ({
+  __esModule: true,
+  renderPage: (...args: unknown[]) => mockRenderPage(...args),
+  renderPageMetadata: jest.fn(),
+  // Never reached — every call in this suite passes its loaders via DI.
+  getMdxSlugs: jest.fn(),
+  getMdxSource: jest.fn(),
+  getPageSections: jest.fn(),
+}));
+
+jest.mock("@working-theory/ui/sections", () => ({
+  __esModule: true,
+  SectionRenderer: () => null,
+}));
+
+import CaseStudiesPage from "../page";
+import {
+  describeHub,
+  type HubPage,
+  renderInput,
+  titlesOf,
+} from "../../../../lib/__tests__/hub-children.fixtures";
+
+describeHub(
+  [
+    "case-studies",
+    CaseStudiesPage as HubPage,
+    "CaseStudiesList",
+    "CaseStudy",
+    "mdx-body",
+  ],
+  mockRenderPage,
+);
+
+describe("prose hub linking a child in its body", () => {
+  it("gives that child no second card", async () => {
+    const l = {
+      getMdxSource: jest.fn(async (type: string, slug: string) =>
+        type === "CaseStudiesList"
+          ? {
+              frontmatter: { type, slug, title: "Hub", description: "d" },
+              body: "Read [the Acme story](/case-studies/acme).",
+            }
+          : { frontmatter: { type, slug, title: slug }, body: "" },
+      ),
+      getPageSections: jest.fn(async () => []),
+      getMdxSlugs: jest.fn(async () => ["acme", "beta"]),
+    };
+    const input = await renderInput(
+      mockRenderPage,
+      CaseStudiesPage as HubPage,
+      l,
+    );
+    const sections = await input.getPageSections({});
+    expect(titlesOf(sections[0])).toEqual(["beta"]);
+    expect(input.trailing?.props.sections).toEqual(sections);
+  });
+});