create-ailk 0.7.0 → 0.9.0

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

@@ -0,0 +1,59 @@
+// Portfolio item page (#6687). Reads the PortfolioItem MDX for the given slug and emits a
+// JSON-LD <script>. Unknown slugs trigger 404. Renders `sections[]` when the
+// frontmatter carries them (the /for composed pattern), MDX prose otherwise.
+// NO_HAND_IMPLEMENT_OK: /build-starter operator-directed live pass (#6687).
+import {
+  getMdxSource as defaultGetMdxSource,
+  getMdxSlugs,
+  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 }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "PortfolioItem", slug, locale });
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("PortfolioItem", params.locale);
+  return slugs.map((slug: string) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const source = await getMdxSource("PortfolioItem", slug, locale);
+
+  if (!source) {
+    notFound();
+  }
+
+  const composed =
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) > 0;
+
+  return renderPage({
+    type: "PortfolioItem",
+    slug,
+    locale,
+    translationsNamespace: "portfolio",
+    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
+    getMdxSource: async () => source,
+  });
+}

package/templates/apps/web/app/[locale]/{book-a-call → portfolio}/page.tsx

@@ -1,9 +1,8 @@
-// Book-a-call page (#6658 D5) — a BookCall at /book-a-call, reading the
-// fixed slug `book-call` (the monorepo's own content already uses it). Its
-// CTA points at /contact, or at /meet where a template carries scheduling. A
-// module-less surface a template enables by naming it in its roster; with no
-// content the route 404s. Mirrors use-cases/page.tsx: a sections-composed page
-// renders its sections, a prose-only page its MDX body.
+// Portfolio list page (#6687). Reads PortfolioList MDX via the content adapter and emits
+// a JSON-LD CollectionPage via the dispatcher.
+// NO_HAND_IMPLEMENT_OK: /build-starter operator-directed live pass (#6687) — the
+// /for composed pattern mirrored onto the portfolio hub: sections when the
+// frontmatter carries `sections[]`, MDX prose otherwise (existing prose pages unchanged).
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
 import {
   getMdxSource as loadMdxSource,
@@ -23,8 +22,8 @@ export async function generateMetadata({
 }: Pick<Props, "params">): Promise<Metadata> {
   const { locale } = await params;
   return renderPageMetadata({
-    type: "BookCall",
-    slug: "book-call",
+    type: "PortfolioList",
+    slug: "portfolio",
     locale,
   });
 }
@@ -34,16 +33,16 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
-  const source = await (getMdxSource ?? loadMdxSource)("BookCall", "book-call", locale);
+  const source = await (getMdxSource ?? loadMdxSource)("PortfolioList", "portfolio", locale);
   const composed =
     source !== null &&
     Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
-    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
-      0;
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) > 0;
   return renderPage({
-    type: "BookCall",
-    slug: "book-call",
+    type: "PortfolioList",
+    slug: "portfolio",
     locale,
+    translationsNamespace: "portfolio",
     ...(composed ? {} : { bodyMode: "mdx-body" as const }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });

package/templates/apps/web/app/[locale]/vs/[slug]/__tests__/page.test.tsx

@@ -0,0 +1,112 @@
+/**
+ * Tests for /vs/[slug] (#6878 D9) — the ComparisonPage detail route.
+ * `renderPage`/`renderPageMetadata`/`getMdxSlugs` are mocked at the
+ * `@working-theory/page-renderer` boundary; `getMdxSource` is supplied
+ * per-call through the route's DI prop.
+ */
+// The mock return value is never rendered — every assertion below inspects
+// `mockRenderPage.mock.calls` directly — so it carries no `ReactElement`
+// cast; `renderPage`'s real return type is `Promise<ReactElement>` in
+// production, unaffected by this mock's loose type here.
+const mockRenderPage = jest.fn(async (..._args: unknown[]) => "<rendered/>");
+const mockRenderPageMetadata = jest.fn((..._args: unknown[]) => undefined);
+const mockGetMdxSlugs = jest.fn((..._args: unknown[]) => Promise.resolve<string[]>([]));
+
+jest.mock("@working-theory/page-renderer", () => ({
+  __esModule: true,
+  getMdxSlugs: (...args: unknown[]) => mockGetMdxSlugs(...args),
+  renderPage: (...args: unknown[]) => mockRenderPage(...args),
+  renderPageMetadata: (...args: unknown[]) => mockRenderPageMetadata(...args),
+  getMdxSource: jest.fn(),
+}));
+
+import ComparisonPage, {
+  generateMetadata,
+  generateStaticParams,
+} from "../page";
+
+beforeEach(() => jest.clearAllMocks());
+
+describe("ComparisonPage detail — metadata + static params", () => {
+  it("resolves metadata for the given slug", async () => {
+    await generateMetadata({
+      params: Promise.resolve({ locale: "en", slug: "acme" }),
+    });
+    expect(mockRenderPageMetadata).toHaveBeenCalledWith({
+      type: "ComparisonPage",
+      slug: "acme",
+      locale: "en",
+    });
+  });
+
+  it("enumerates every ComparisonPage slug for static generation", async () => {
+    mockGetMdxSlugs.mockResolvedValue(["acme", "globex"]);
+    const params = await generateStaticParams({ params: { locale: "en" } });
+    expect(mockGetMdxSlugs).toHaveBeenCalledWith("ComparisonPage", "en");
+    expect(params).toEqual([{ slug: "acme" }, { slug: "globex" }]);
+  });
+});
+
+describe("ComparisonPage detail — sections vs mdx-body", () => {
+  it("renders in sections mode (D10: hero, decision-split, comparison-table, cta) when frontmatter carries sections", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "ComparisonPage",
+        slug: "acme",
+        title: "vs. Acme",
+        description: "How we compare to Acme.",
+        sections: [
+          { id: "hero", type: "hero", data: {} },
+          { id: "compare", type: "decision-split", data: {} },
+          { id: "table", type: "comparison-table", data: {} },
+          {
+            id: "cta",
+            type: "cta",
+            data: { primaryCta: { label: "See all alternatives", href: "/alternatives" } },
+          },
+        ],
+      },
+      body: "",
+    });
+
+    await ComparisonPage({
+      params: Promise.resolve({ locale: "en", slug: "acme" }),
+      getMdxSource,
+    });
+
+    const passedInput = mockRenderPage.mock.calls[0]?.[0] as {
+      type: string;
+      slug: string;
+      bodyMode?: string;
+    };
+    expect(passedInput.type).toBe("ComparisonPage");
+    expect(passedInput.slug).toBe("acme");
+    expect(passedInput.bodyMode).toBeUndefined();
+  });
+
+  it("falls back to mdx-body mode for a prose-only comparison page", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "ComparisonPage",
+        slug: "acme",
+        title: "vs. Acme",
+        description: "How we compare to Acme.",
+      },
+      body: "Prose comparison.",
+    });
+
+    await ComparisonPage({
+      params: Promise.resolve({ locale: "en", slug: "acme" }),
+      getMdxSource,
+    });
+
+    const passedInput = mockRenderPage.mock.calls[0]?.[0] as {
+      bodyMode?: string;
+      populatedDescriptionTestId?: string;
+    };
+    expect(passedInput.bodyMode).toBe("mdx-body");
+    expect(passedInput.populatedDescriptionTestId).toBe(
+      "comparison-description",
+    );
+  });
+});

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

@@ -0,0 +1,70 @@
+// ComparisonPage detail (#6878 D9) — one head-to-head comparison at
+// /vs/<slug>, listed by the /alternatives hub. Reads the ComparisonPage MDX
+// for the given slug, renders via @working-theory/page-renderer, and emits a
+// JSON-LD WebPage. Unknown slugs 404. Composed `sections[]` (D10 — the
+// generic detail chassis, no dedicated comparison section: hero,
+// decision-split, comparison-table, cta) render as sections; a prose page
+// renders its MDX body — the same rule the /for detail page applies.
+//
+// Gated off by default (surfaces.ts `alternatives` surface): no roster names
+// this route, so a fresh scaffold excludes it. `add-page` installs it (D11)
+// the first time a site adds a comparison.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  getMdxSlugs,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "ComparisonPage", slug, locale });
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("ComparisonPage", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const source = await (getMdxSource ?? loadMdxSource)(
+    "ComparisonPage",
+    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: "ComparisonPage",
+    slug,
+    locale,
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "comparison-description",
+        }),
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}