create-ailk 0.26.0 → 0.28.0

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

@@ -1,15 +1,34 @@
 // Products list page. Reads ProductsList MDX via the content adapter and emits
 // a JSON-LD CollectionPage via the dispatcher.
-import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+// It lists every Product 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: "ProductsList",
+  slug: "products",
+  childType: "Product",
+  linkLabel: "View the product",
+  sectionId: "product-cards",
+  body: "mdx-body",
+};
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
@@ -19,15 +38,12 @@ export async function generateMetadata({
 
 export default async function Page({
   params,
-  getMdxSource,
+  ...loaders
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   return renderPage({
     type: "ProductsList",
     slug: "products",
-    locale,
-    translationsNamespace: "products",
-    bodyMode: "mdx-body",
-    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(await hubPageInput(HUB, locale, loaders)),
   });
 }

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

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

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

@@ -90,6 +90,8 @@ describe("ProjectsPage — snapshot regression", () => {
     const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
     const element = await ProjectsPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       getMdxSource: getMdxSourceEmpty,
     });
     const { container } = render(element);
@@ -104,6 +106,8 @@ describe("ProjectsPage — snapshot regression", () => {
     const getPageSectionsStub = jest.fn().mockResolvedValue([]);
     const element = await ProjectsPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       getMdxSource: getMdxSourcePopulated,
       getPageSections: getPageSectionsStub,
     });

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

@@ -1,6 +1,9 @@
 // Projects listing page. Reads the ProjectsList MDX from the content backend,
 // renders sections via SectionRenderer, and emits a JSON-LD <script>.
+// It lists every Project 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";
@@ -8,35 +11,39 @@ 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: "ProjectsList",
+  slug: "projects",
+  childType: "Project",
+  linkLabel: "View the project",
+  sectionId: "project-cards",
+  body: "sections",
+};
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
   const { locale } = await params;
-  return renderPageMetadata({
-    type: "ProjectsList",
-    slug: "projects",
-    locale,
-  });
+  return renderPageMetadata({ type: "ProjectsList", slug: "projects", locale });
 }
 
 export default async function Page({
   params,
-  getMdxSource,
-  getPageSections,
+  ...loaders
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   return renderPage({
     type: "ProjectsList",
     slug: "projects",
-    locale,
-    translationsNamespace: "projects",
-    ...(getMdxSource !== undefined && { getMdxSource }),
-    ...(getPageSections !== undefined && { getPageSections }),
+    ...(await hubPageInput(HUB, locale, loaders)),
   });
 }

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

@@ -1,7 +1,11 @@
 // Resource detail page. Reads the ResourceDetail MDX for the given slug, renders
-// via renderPage (mdx-body mode), and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
+// via renderPage, 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,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)(
+    "ResourceDetail",
+    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: "ResourceDetail",
     slug,
     locale,
-    bodyMode: "mdx-body",
-    populatedDescriptionTestId: "resource-description",
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "resource-description",
+        }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

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

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

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

@@ -68,6 +68,8 @@ describe("ResourcesPage — snapshot regression", () => {
   it("empty state renders deterministic HTML", async () => {
     const element = await ResourcesPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       getMdxSource: getMdxSourceEmpty,
     });
     const { container } = render(element);
@@ -90,11 +92,13 @@ describe("ResourcesPage — snapshot regression", () => {
 
     const element = await ResourcesPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       getMdxSource: getMdxSourcePopulated,
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Resources","description":"Guides, templates, and tools.","mainEntity":{"@type":"ItemList"}}</script><main id="main"><div><h1>Resources</h1><p data-testid="resources-description" class="mt-block-tight text-lead">Guides, templates, and tools.</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 data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Resources","description":"Guides, templates, and tools.","mainEntity":{"@type":"ItemList"}}</script><main id="main"><div><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 data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
     );
   });
 });
@@ -124,7 +128,7 @@ describe("ResourceDetailPage — snapshot regression", () => {
     });
     const { container } = render(element);
     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":"Getting Started","description":"A guide for new users.","mainEntity":{"@context":"https://schema.org","@type":"Article","headline":"Getting Started","description":"A guide for new users."}},{"@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":"Resources","item":"http://localhost:3000/en/resources"},{"@type":"ListItem","position":3,"name":"Getting Started","item":"http://localhost:3000/en/resources/getting-started"}]}]}</script><main id="main"><div><h1>Getting Started</h1><p data-testid="resource-description" class="mt-block-tight text-lead">A guide for new users.</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 data-testid="mdx-remote" data-source=""></div></article></div></div></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":"Getting Started","description":"A guide for new users.","mainEntity":{"@context":"https://schema.org","@type":"Article","headline":"Getting Started","description":"A guide for new users."}},{"@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":"Resources","item":"http://localhost:3000/en/resources"},{"@type":"ListItem","position":3,"name":"Getting Started","item":"http://localhost:3000/en/resources/getting-started"}]}]}</script><main id="main"><div><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 data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
     );
   });
 

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

@@ -1,39 +1,49 @@
 // Resources hub page. Reads ResourcesHub MDX via the content adapter and emits
 // a JSON-LD CollectionPage via the dispatcher.
+// It lists every ResourceDetail 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: "ResourcesHub",
+  slug: "resources",
+  childType: "ResourceDetail",
+  linkLabel: "Read the resource",
+  sectionId: "resource-cards",
+  body: "mdx-body",
+};
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
   const { locale } = await params;
-  return renderPageMetadata({
-    type: "ResourcesHub",
-    slug: "resources",
-    locale,
-  });
+  return renderPageMetadata({ type: "ResourcesHub", slug: "resources", locale });
 }
 
 export default async function Page({
   params,
-  getMdxSource,
+  ...loaders
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   return renderPage({
     type: "ResourcesHub",
     slug: "resources",
-    locale,
-    translationsNamespace: "resources",
-    bodyMode: "mdx-body",
-    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(await hubPageInput(HUB, locale, loaders)),
   });
 }

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

@@ -0,0 +1,68 @@
+// A service under its category (#10043 D2/D7): `/services/<category>/<slug>`,
+// served at `<services base>/<category>/<slug>`. Gated with the `services`
+// surface. The service's `parent` must name this category, and the category
+// must be a Service with no parent of its own; anything else is a 404, so a
+// service is served at exactly one URL.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string; child: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, child } = await params;
+  return renderPageMetadata({ type: "Service", slug: child, locale });
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug, child } = await params;
+  const load = getMdxSource ?? loadMdxSource;
+  const source = await load("Service", child, locale);
+  // 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 composed =
+    source !== null &&
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
+      0;
+  const render = () =>
+    renderPage({
+      type: "Service",
+      slug: child,
+      locale,
+      ...(composed
+        ? {}
+        : {
+            bodyMode: "mdx-body" as const,
+            populatedDescriptionTestId: "service-description",
+          }),
+      ...(getMdxSource !== undefined && { getMdxSource }),
+    });
+  // A missing page is renderPage's to answer (#7537).
+  if (source === null) return render();
+
+  if (source.frontmatter.parent !== slug) notFound();
+  const category = await load("Service", slug, locale);
+  if (
+    category === null ||
+    category.frontmatter.parent !== undefined
+  ) {
+    notFound();
+  }
+  return render();
+}

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

@@ -1,10 +1,28 @@
 // Service detail page. Reads the Service 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.
+//
+// #10043 D7 — a service with a `parent` lives under its category, so its flat
+// URL answers a permanent redirect there; a service that is a category lists
+// its services after its body.
 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 { SectionRenderer } from "@working-theory/ui";
 import type { Metadata } from "next";
+import { permanentRedirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { listDetailPages } from "../../../../lib/route-family";
+import {
+  childServices,
+  serviceChildrenSection,
+  servicePublicPath,
+} from "../../../../lib/service-listing";
+
 interface Props {
   params: Promise<{ locale: string; slug: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
@@ -22,12 +40,49 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
-  return renderPage({
-    type: "Service",
-    slug,
-    locale,
-    bodyMode: "mdx-body",
-    populatedDescriptionTestId: "service-description",
-    ...(getMdxSource !== undefined && { getMdxSource }),
+  const load = getMdxSource ?? loadMdxSource;
+  const source = await load("Service", slug, locale);
+  // 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 composed =
+    source !== null &&
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
+      0;
+  // `trailing` is set only on a category (below), so every other render's
+  // input is the one this route has always passed.
+  const render = (trailing?: ReactElement) =>
+    renderPage({
+      type: "Service",
+      slug,
+      locale,
+      ...(composed
+        ? {}
+        : {
+            bodyMode: "mdx-body" as const,
+            populatedDescriptionTestId: "service-description",
+          }),
+      ...(getMdxSource !== undefined && { getMdxSource }),
+      ...(trailing !== undefined && { trailing }),
+    });
+  // A missing page is renderPage's to answer (#7537).
+  if (source === null) return render();
+
+  const parent = source.frontmatter.parent;
+  if (parent !== undefined) {
+    const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE ?? "en";
+    const prefix = locale === defaultLocale ? "" : `/${locale}`;
+    permanentRedirect(`${prefix}${servicePublicPath(slug, parent)}`);
+  }
+
+  const children = childServices(await listDetailPages("Service", locale, load), slug);
+  if (children.length === 0) return render();
+
+  const t = await getTranslations({ namespace: "services", locale });
+  const list = serviceChildrenSection(children, {
+    childrenHeading: t("childrenHeading"),
+    viewService: t("viewService"),
   });
+  return render(<SectionRenderer sections={[list]} locale={locale} />);
 }