create-ailk 0.27.0 → 0.28.1

package/templates/apps/web/app/[locale]/services/__tests__/service-families.test.tsx

@@ -0,0 +1,368 @@
+/**
+ * The services routes under a moved base and with categories (#10043 D7/D8,
+ * AC-6), and unchanged on a site that sets nothing (AC-10).
+ *
+ * The moved-base cases load the routes afresh under `jest.isolateModules`
+ * with `NEXT_PUBLIC_AILK_SERVICES_PATH=/capabilities` (`lib/services-path.ts`
+ * reads it at module load) and read what each route hands `renderPage`; the
+ * no-setting cases render the routes as imported and compare their markup
+ * with a direct `renderPage` call over the same fixture, given today's input
+ * (the `pricing/__tests__/unconnected.test.tsx` equality-oracle shape).
+ */
+import { render } from "@testing-library/react";
+import type { RenderPageInput } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+  permanentRedirect: jest.fn(() => {
+    throw new Error("NEXT_REDIRECT");
+  }),
+}));
+
+jest.mock("@working-theory/page-renderer", () => {
+  const actual = jest.requireActual("@working-theory/page-renderer");
+  return {
+    ...actual,
+    renderPage: jest.fn(actual.renderPage),
+    getMdxSlugs: jest.fn(actual.getMdxSlugs),
+    getPageSections: jest.fn(actual.getPageSections),
+  };
+});
+
+import ServicesPage from "../page";
+import ServiceSlugPage from "../[slug]/page";
+
+const actual = jest.requireActual("@working-theory/page-renderer") as {
+  renderPage: (input: RenderPageInput) => Promise<ReactElement>;
+  getMdxSlugs: (...args: unknown[]) => Promise<string[]>;
+  getPageSections: (...args: unknown[]) => Promise<unknown[]>;
+};
+const actualRenderPage = actual.renderPage;
+const mocked = jest.requireMock("@working-theory/page-renderer") as {
+  renderPage: jest.Mock;
+  getMdxSlugs: jest.Mock;
+  getPageSections: jest.Mock;
+};
+const nav = jest.requireMock("next/navigation") as {
+  notFound: jest.Mock;
+  permanentRedirect: jest.Mock;
+};
+
+// Every case starts from the real collaborators, with fresh call records.
+beforeEach(() => {
+  mocked.renderPage.mockReset().mockImplementation(actual.renderPage);
+  mocked.getMdxSlugs.mockReset().mockImplementation(actual.getMdxSlugs);
+  mocked.getPageSections.mockReset().mockImplementation(actual.getPageSections);
+  nav.notFound.mockClear();
+  nav.permanentRedirect.mockClear();
+});
+
+type Frontmatter = Record<string, unknown>;
+type Source = { frontmatter: Frontmatter; body: string };
+
+function service(slug: string, extra: Frontmatter = {}): Source {
+  return {
+    frontmatter: {
+      type: "Service",
+      slug,
+      title: slug.toUpperCase(),
+      description: `${slug} description.`,
+      ...extra,
+    },
+    body: `# ${slug}\n\nBody.`,
+  };
+}
+
+/** A `getMdxSource` over a slug → source table; anything else is null. */
+function sources(table: Record<string, Source>) {
+  return jest.fn(async (_type: string, slug: string) => table[slug] ?? null);
+}
+
+// The moved routes resolve to what the stubbed `renderPage` returns — the
+// captured `{ input }` — so they are typed as resolving to `unknown`.
+interface Routes {
+  hub: (props: Parameters<typeof ServicesPage>[0]) => Promise<unknown>;
+  slugPage: (props: Parameters<typeof ServiceSlugPage>[0]) => Promise<unknown>;
+  childPage: (props: {
+    params: Promise<{ locale: string; slug: string; child: string }>;
+    getMdxSource?: unknown;
+  }) => Promise<unknown>;
+  renderPage: jest.Mock;
+  getMdxSlugs: jest.Mock;
+  getPageSections: jest.Mock;
+  notFound: jest.Mock;
+  permanentRedirect: jest.Mock;
+}
+
+/** The three routes and their mocked collaborators, loaded with a services base. */
+function loadMoved(base: string): Routes {
+  const saved = process.env.NEXT_PUBLIC_AILK_SERVICES_PATH;
+  process.env.NEXT_PUBLIC_AILK_SERVICES_PATH = base;
+  let routes: Routes | undefined;
+  try {
+    // The mocked collaborators are shared with the top-level registry; only
+    // the routes and `lib/services-path.ts` load afresh with the base.
+    mocked.renderPage.mockImplementation(async (input: RenderPageInput) => ({
+      input,
+    }));
+    jest.isolateModules(() => {
+      routes = {
+        hub: require("../page").default,
+        slugPage: require("../[slug]/page").default,
+        childPage: require("../[slug]/[child]/page").default,
+        renderPage: mocked.renderPage,
+        getMdxSlugs: mocked.getMdxSlugs,
+        getPageSections: mocked.getPageSections,
+        notFound: nav.notFound,
+        permanentRedirect: nav.permanentRedirect,
+      };
+    });
+  } finally {
+    if (saved === undefined) delete process.env.NEXT_PUBLIC_AILK_SERVICES_PATH;
+    else process.env.NEXT_PUBLIC_AILK_SERVICES_PATH = saved;
+  }
+  return routes!;
+}
+
+const params = (locale: string, slug: string) =>
+  Promise.resolve({ locale, slug });
+
+describe("services under /capabilities (#10043 AC-6)", () => {
+  let r: Routes;
+  beforeEach(() => {
+    r = loadMoved("/capabilities");
+  });
+
+  it("redirects a nested service's flat URL to its category URL, per locale", async () => {
+    const load = sources({ x: service("x", { parent: "ai" }) });
+    await expect(
+      r.slugPage({ params: params("en", "x"), getMdxSource: load as never }),
+    ).rejects.toThrow("NEXT_REDIRECT");
+    expect(r.permanentRedirect).toHaveBeenLastCalledWith("/capabilities/ai/x");
+    await expect(
+      r.slugPage({ params: params("pt-BR", "x"), getMdxSource: load as never }),
+    ).rejects.toThrow("NEXT_REDIRECT");
+    expect(r.permanentRedirect).toHaveBeenLastCalledWith(
+      "/pt-BR/capabilities/ai/x",
+    );
+    expect(r.renderPage).not.toHaveBeenCalled();
+  });
+
+  it("lists a category's services after its body, in slug order", async () => {
+    const load = sources({
+      ai: service("ai"),
+      a: service("a", { parent: "ai", summary: "A summary." }),
+      b: service("b", { parent: "ai" }),
+      c: service("c", { parent: "other" }),
+    });
+    r.getMdxSlugs.mockResolvedValue(["c", "b", "ai", "a"]);
+    const out = (await r.slugPage({
+      params: params("en", "ai"),
+      getMdxSource: load as never,
+    })) as {
+      input: RenderPageInput & {
+        trailing: ReactElement<{
+          sections: Array<{ data: { headline: string; items: unknown[] } }>;
+        }>;
+      };
+    };
+    expect(out.input).toMatchObject({
+      type: "Service",
+      slug: "ai",
+      bodyMode: "mdx-body",
+    });
+    const [list] = out.input.trailing.props.sections;
+    expect(list?.data.headline).toBe("Services in this area");
+    expect(list?.data.items).toEqual([
+      {
+        title: "A",
+        description: "A summary.",
+        link: { label: "View service", href: "/capabilities/ai/a" },
+      },
+      {
+        title: "B",
+        description: "b description.",
+        link: { label: "View service", href: "/capabilities/ai/b" },
+      },
+    ]);
+  });
+
+  it("renders a service with no children through today's input", async () => {
+    const load = sources({ solo: service("solo") });
+    r.getMdxSlugs.mockResolvedValue(["solo"]);
+    const out = (await r.slugPage({
+      params: params("en", "solo"),
+      getMdxSource: load as never,
+    })) as {
+      input: Record<string, unknown>;
+    };
+    expect(out.input).toEqual({
+      type: "Service",
+      slug: "solo",
+      locale: "en",
+      bodyMode: "mdx-body",
+      populatedDescriptionTestId: "service-description",
+      getMdxSource: load,
+    });
+  });
+
+  it("serves a nested service through renderPage at its category", async () => {
+    const load = sources({
+      ai: service("ai"),
+      x: service("x", { parent: "ai" }),
+    });
+    const out = (await r.childPage({
+      params: Promise.resolve({ locale: "en", slug: "ai", child: "x" }),
+      getMdxSource: load,
+    })) as { input: Record<string, unknown> };
+    expect(out.input).toMatchObject({
+      type: "Service",
+      slug: "x",
+      locale: "en",
+      bodyMode: "mdx-body",
+    });
+  });
+
+  it.each<[string, Record<string, Source>]>([
+    [
+      "its parent is another category",
+      { ai: service("ai"), x: service("x", { parent: "other" }) },
+    ],
+    ["its category page is missing", { x: service("x", { parent: "ai" }) }],
+    [
+      "its category has its own parent",
+      {
+        top: service("top"),
+        ai: service("ai", { parent: "top" }),
+        x: service("x", { parent: "ai" }),
+      },
+    ],
+  ])("answers 404 for a nested URL when %s", async (_label, table) => {
+    await expect(
+      r.childPage({
+        params: Promise.resolve({ locale: "en", slug: "ai", child: "x" }),
+        getMdxSource: sources(table),
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(r.renderPage).not.toHaveBeenCalled();
+  });
+
+  it("hands a missing nested service to renderPage", async () => {
+    const out = (await r.childPage({
+      params: Promise.resolve({ locale: "en", slug: "ai", child: "x" }),
+      getMdxSource: sources({}),
+    })) as { input: Record<string, unknown> };
+    expect(out.input).toMatchObject({ type: "Service", slug: "x" });
+    expect(r.notFound).not.toHaveBeenCalled();
+  });
+
+  it("re-points the hub's section links onto the base", async () => {
+    const hubSource = {
+      frontmatter: {
+        type: "ServicesList",
+        slug: "services",
+        title: "Services",
+        description: "All.",
+        sections: [{ type: "hero", id: "h", data: {} }],
+      },
+      body: "",
+    };
+    // No Service pages: this case pins the remap of the hub's own links;
+    // the generated child cards are hub-children.test.tsx's (#10121).
+    r.getMdxSlugs.mockResolvedValue([]);
+    r.getPageSections.mockResolvedValue([
+      {
+        type: "items",
+        id: "list",
+        data: {
+          items: [
+            { title: "X", link: { label: "Go", href: "/services/x" } },
+            {
+              title: "Y",
+              link: { label: "Go", href: "https://example.com/services" },
+            },
+          ],
+        },
+      },
+    ]);
+    const out = (await r.hub({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: jest.fn().mockResolvedValue(hubSource),
+    })) as { input: RenderPageInput };
+    const sections = (await out.input.getPageSections!(
+      hubSource.frontmatter as never,
+    )) as Array<{
+      data: { items: Array<{ link: { href: string } }> };
+    }>;
+    expect(sections[0]?.data.items.map((item) => item.link.href)).toEqual([
+      "/capabilities/x",
+      "https://example.com/services",
+    ]);
+  });
+});
+
+describe("a site that sets nothing (#10043 AC-10)", () => {
+  beforeEach(() => {
+    mocked.getMdxSlugs.mockResolvedValue(["consulting", "implementation"]);
+  });
+
+  it("renders the /services hub exactly as a direct renderPage call", async () => {
+    // No Service pages: the hub's generated child cards (#10121) are pinned in
+    // hub-children.test.tsx; this case pins "no services.path changes nothing".
+    mocked.getMdxSlugs.mockResolvedValue([]);
+    const load = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "ServicesList",
+        slug: "services",
+        title: "Services",
+        description: "All services.",
+      },
+      body: "# Services\n\nBody.",
+    });
+    const viaRoute = render(
+      await ServicesPage({
+        params: Promise.resolve({ locale: "en" }),
+        getMdxSource: load,
+      }),
+    );
+    const direct = render(
+      await actualRenderPage({
+        type: "ServicesList",
+        slug: "services",
+        locale: "en",
+        translationsNamespace: "services",
+        bodyMode: "mdx-body",
+        getMdxSource: load,
+      }),
+    );
+    expect(viaRoute.container.innerHTML).toBe(direct.container.innerHTML);
+  });
+
+  it("renders /services/consulting exactly as a direct renderPage call", async () => {
+    const load = sources({
+      consulting: service("consulting"),
+      implementation: service("implementation"),
+    });
+    const viaRoute = render(
+      await ServiceSlugPage({
+        params: params("en", "consulting"),
+        getMdxSource: load as never,
+      }),
+    );
+    const direct = render(
+      await actualRenderPage({
+        type: "Service",
+        slug: "consulting",
+        locale: "en",
+        bodyMode: "mdx-body",
+        populatedDescriptionTestId: "service-description",
+        getMdxSource: load as never,
+      }),
+    );
+    expect(viaRoute.container.innerHTML).toBe(direct.container.innerHTML);
+  });
+});

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

@@ -1,17 +1,34 @@
 // Services list page. Reads ServicesList MDX via the content adapter and emits
-// a JSON-LD CollectionPage via the dispatcher.
-import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import {
-  getMdxSource as loadMdxSource,
-  renderPage,
-  renderPageMetadata,
+// a JSON-LD CollectionPage via the dispatcher. The /for composed pattern
+// (#7745 D2): sections when the frontmatter carries `sections[]`, MDX prose
+// otherwise.
+// It lists every top-level Service — a category, or a service with no
+// category — through one generated card section (#10121,
+// apps/web/lib/hub-children.tsx). A service with a `parent` is listed on its
+// category's page instead (#10043 D7). Cards link to the service's public URL
+// under the site's services base, and on a site that moved its services the
+// hub's own section links name that base too (#10043 D8).
+import type {
+  getMdxSlugs as defaultGetMdxSlugs,
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
 } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { type HubConfig, hubPageInput } from "../../../lib/hub-children";
+import {
+  serviceChildrenSection,
+  withPublicServicesSections,
+} from "../../../lib/service-listing";
+
 interface Props {
   params: Promise<{ locale: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
 }
 
 export async function generateMetadata({
@@ -23,23 +40,32 @@ export async function generateMetadata({
 
 export default async function Page({
   params,
-  getMdxSource,
+  ...loaders
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
-  // #7745 D2 — the /for switch (#6878): a ServicesList page that composes
-  // `sections[]` renders them; a prose-only page keeps the MDX-body render.
-  // The CollectionPage JSON-LD is built from the sections either way.
-  const source = await (getMdxSource ?? loadMdxSource)("ServicesList", "services", 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({ namespace: "services", locale });
+  const labels = {
+    childrenHeading: t("childrenHeading"),
+    viewService: t("viewService"),
+  };
+  const hub: HubConfig = {
+    listType: "ServicesList",
+    slug: "services",
+    childType: "Service",
+    linkLabel: labels.viewService,
+    sectionId: "service-cards",
+    body: "composed",
+    // No category: the same reading the category listing gives `parent`
+    // (absent, blank or not a string), so every service is listed somewhere.
+    includeChild: ({ frontmatter: { parent } }) =>
+      typeof parent !== "string" || parent.length === 0,
+    // The category page's own card shape, at the service's public URL.
+    card: (page) => serviceChildrenSection([page], labels).data.items[0]!,
+    mapSections: withPublicServicesSections,
+  };
   return renderPage({
     type: "ServicesList",
     slug: "services",
-    locale,
-    translationsNamespace: "services",
-    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
-    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(await hubPageInput(hub, locale, loaders)),
   });
 }

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

@@ -61,7 +61,7 @@ describe("software/[slug] — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes.","mainEntity":{"@context":"https://schema.org","@type":"SoftwareApplication","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes."}}</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">@working-theory/page-renderer</h1><p data-testid="software-description" class="mt-block-tight text-lead">Single rendering primitive for MDX-wired routes.</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">## Overview
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes.","mainEntity":{"@context":"https://schema.org","@type":"SoftwareApplication","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes."}}</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">## Overview
 
      Body content.</div></div></article></div></div></div></main>"
     `);

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

@@ -0,0 +1,32 @@
+/**
+ * Hub child cards (#10121) for /team. The shared cases live in
+ * `lib/__tests__/hub-children.fixtures.ts`; this file sits beside the route so
+ * a scaffold without /team 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 TeamPage from "../page";
+import {
+  describeHub,
+  type HubPage,
+} from "../../../../lib/__tests__/hub-children.fixtures";
+
+describeHub(
+  ["team", TeamPage as HubPage, "TeamList", "TeamMember", "composed"],
+  mockRenderPage,
+);

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

@@ -1,49 +1,50 @@
 // Team list page (#7744 D2). Reads TeamList MDX via the content adapter and emits
-// a JSON-LD CollectionPage via the dispatcher.
-// A copy of the portfolio hub (#6687) with the type and slug changed — the /for
-// composed pattern: sections when the frontmatter carries `sections[]`, MDX
-// prose otherwise.
-import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import {
-  getMdxSource as loadMdxSource,
-  renderPage,
-  renderPageMetadata,
+// a JSON-LD CollectionPage via the dispatcher. The /for composed pattern:
+// sections when the frontmatter carries `sections[]`, MDX prose otherwise.
+// It lists every TeamMember page through one generated card section (#10121,
+// apps/web/lib/hub-children.tsx — the /alternatives and /templates shape).
+import type {
+  getMdxSlugs as defaultGetMdxSlugs,
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
 } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
 import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
+import { type HubConfig, hubPageInput } from "../../../lib/hub-children";
+
 interface Props {
   params: Promise<{ locale: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
 }
 
+const HUB: HubConfig = {
+  listType: "TeamList",
+  slug: "team",
+  childType: "TeamMember",
+  linkLabel: "View profile",
+  sectionId: "team-member-cards",
+  body: "composed",
+};
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
   const { locale } = await params;
-  return renderPageMetadata({
-    type: "TeamList",
-    slug: "team",
-    locale,
-  });
+  return renderPageMetadata({ type: "TeamList", slug: "team", locale });
 }
 
 export default async function Page({
   params,
-  getMdxSource,
+  ...loaders
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
-  const source = await (getMdxSource ?? loadMdxSource)("TeamList", "team", 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: "TeamList",
     slug: "team",
-    locale,
-    translationsNamespace: "team",
-    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
-    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(await hubPageInput(HUB, locale, loaders)),
   });
 }

package/templates/apps/web/app/[locale]/tech-articles/[slug]/page.tsx

@@ -1,7 +1,11 @@
 // TechArticle detail page. Reads the TechArticle MDX for the given slug, renders via
 // @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs trigger 404.
 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,12 +26,29 @@ 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)(
+    "TechArticle",
+    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: "TechArticle",
     slug,
     locale,
-    bodyMode: "mdx-body",
-    populatedDescriptionTestId: "tech-article-description",
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "tech-article-description",
+        }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }