create-ailk 0.20.0 → 0.22.0

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

@@ -0,0 +1,46 @@
+// A person's own page (#8650 D3). Reads the Person MDX for the given slug and
+// emits a JSON-LD <script>. Unknown slugs 404 through renderPage. Renders
+// `sections[]` when the frontmatter carries them (the /for composed
+// pattern), MDX prose otherwise.
+import {
+  getMdxSource as defaultGetMdxSource,
+  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: "Person", slug, locale });
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  // Read once to pick the body mode. A null source still goes to renderPage,
+  // which owns the unknown-slug branch (#7537).
+  const source = await getMdxSource("Person", 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: "Person",
+    slug,
+    locale,
+    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
+    getMdxSource: async () => source,
+  });
+}

package/templates/apps/web/app/[locale]/about/__tests__/about-routes.test.tsx

@@ -0,0 +1,350 @@
+/**
+ * The about routes (#8650 spec, AC-1 through AC-4):
+ *
+ *  - AC-1: `/about/<slug>` renders a `ProfilePage` whose `mainEntity` is a
+ *    `Person`, valid under the schema validator, with an About breadcrumb; an
+ *    unknown slug 404s through `renderPage`.
+ *  - AC-2: `/about` lists every `Person` page as a generated `team` section,
+ *    each member linking to its own `/about/<slug>` page, before a trailing
+ *    `cta` section.
+ *  - AC-3: the routes map, sitemap and `llms.txt` all advertise a `Person`
+ *    page at `/about/<slug>`, never a bare `/<slug>`.
+ *  - AC-4: with zero `Person` pages, `/about` renders byte-identical to
+ *    calling `renderPage` directly (C5 — a fresh scaffold is such a site).
+ *
+ * MDX sources are inline stubs (no fs reads) for AC-2/AC-4, and a real
+ * `createMdxAdapter` over a temp content root for AC-1 (the spec's own
+ * method) — both run unchanged inside a scaffold.
+ */
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+import { render } from "@testing-library/react";
+import { createMdxAdapter } from "@working-theory/content-adapters";
+import * as pageRenderer from "@working-theory/page-renderer";
+import { validatePageGraph } from "@working-theory/schema-validator";
+import React from "react";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+import AboutPage from "../page";
+import AboutPersonPage from "../[slug]/page";
+import { createSitemapHandler } from "../../../sitemap.xml/route";
+import { createLlmsHandler } from "../../../llms.txt/route";
+import type { ContentAdapter } from "@working-theory/content-adapters";
+
+type JsonLd = Record<string, unknown>;
+
+function jsonLdScripts(container: HTMLElement): JsonLd[] {
+  return [
+    ...container.querySelectorAll("script[type='application/ld+json']"),
+  ].map((s) => JSON.parse(s.textContent ?? "") as JsonLd);
+}
+
+describe("about/[slug] — a person's own page (AC-1)", () => {
+  let root: string;
+
+  beforeAll(() => {
+    root = mkdtempSync(join(tmpdir(), "ailk-8650-"));
+    mkdirSync(join(root, "en", "Person"), { recursive: true });
+    writeFileSync(
+      join(root, "en", "Person", "sam-henry.mdx"),
+      [
+        "---",
+        "type: Person",
+        "slug: sam-henry",
+        "title: Sam Henry",
+        "description: Co-founder and partner.",
+        "schema:",
+        "  jobTitle: Partner",
+        "---",
+        "",
+        "Sam Henry, co-founder and partner.",
+        "",
+      ].join("\n"),
+    );
+  });
+
+  afterAll(() => {
+    rmSync(root, { recursive: true, force: true });
+  });
+
+  it("emits one ProfilePage graph whose Person carries @id #person, valid under the schema validator", async () => {
+    const adapter = createMdxAdapter({ contentRoot: root, defaultLocale: "en" });
+    const element = await AboutPersonPage({
+      params: Promise.resolve({ locale: "en", slug: "sam-henry" }),
+      getMdxSource: (type, slug, locale) =>
+        adapter.getPageSource(type, slug, locale),
+    });
+    const { container } = render(element);
+    const scripts = jsonLdScripts(container);
+    expect(scripts).toHaveLength(1);
+    const graph = scripts[0]!["@graph"] as JsonLd[];
+    expect(validatePageGraph(graph as never, "Person")).toEqual(
+      expect.objectContaining({ valid: true }),
+    );
+
+    const profile = graph.find((b) => b["@type"] === "ProfilePage")!;
+    const person = profile["mainEntity"] as JsonLd;
+    expect(person["@type"]).toBe("Person");
+    expect(person["@id"]).toBe("#person");
+    expect(person["name"]).toBe("Sam Henry");
+    expect(person["jobTitle"]).toBe("Partner");
+
+    const breadcrumb = graph.find((b) => b["@type"] === "BreadcrumbList")!;
+    const items = breadcrumb["itemListElement"] as Array<{ item: string }>;
+    expect(items[1]!.item).toMatch(/\/en\/about$/);
+  });
+
+  it("404s an unknown slug through renderPage, with no translations namespace", async () => {
+    const renderPageSpy = jest.spyOn(pageRenderer, "renderPage");
+    const adapter = createMdxAdapter({ contentRoot: root, defaultLocale: "en" });
+    await expect(
+      AboutPersonPage({
+        params: Promise.resolve({ locale: "en", slug: "nobody" }),
+        getMdxSource: (type, slug, locale) =>
+          adapter.getPageSource(type, slug, locale),
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(renderPageSpy).toHaveBeenCalledTimes(1);
+    expect(
+      renderPageSpy.mock.calls[0]![0].translationsNamespace,
+    ).toBeUndefined();
+    renderPageSpy.mockRestore();
+  });
+});
+
+const ABOUT_WITH_CTA = {
+  frontmatter: {
+    type: "AboutPage",
+    slug: "about",
+    title: "About",
+    description: "About us.",
+    sections: [
+      {
+        id: "intro",
+        type: "content-block",
+        data: { headline: "About us", body: "We build things." },
+      },
+      {
+        id: "closing",
+        type: "cta",
+        data: {
+          headline: "Let's talk",
+          primaryCta: { label: "Contact us", href: "/contact" },
+        },
+      },
+    ],
+  },
+  body: "",
+};
+
+const SAM_SOURCE = {
+  frontmatter: {
+    type: "Person",
+    slug: "sam-henry",
+    title: "Sam Henry",
+    description: "Co-founder and partner.",
+    schema: { jobTitle: "Partner" },
+  },
+  body: "",
+};
+
+const WENDI_SOURCE = {
+  frontmatter: {
+    type: "Person",
+    slug: "wendi-henry",
+    title: "About Wendi",
+    description: "Co-founder and partner.",
+    schema: { name: "Wendi Henry" },
+  },
+  body: "",
+};
+
+describe("about — the generated people list (AC-2)", () => {
+  it("lists every Person page as one team section, before the closing cta, linking to /about/<slug>", async () => {
+    const getMdxSource = jest.fn(
+      async (type: string, slug: string): Promise<unknown> => {
+        if (type === "AboutPage") return ABOUT_WITH_CTA;
+        if (type === "Person" && slug === "sam-henry") return SAM_SOURCE;
+        if (type === "Person" && slug === "wendi-henry") return WENDI_SOURCE;
+        return null;
+      },
+    );
+    const getMdxSlugs = jest
+      .fn()
+      .mockResolvedValue(["wendi-henry", "sam-henry", "ghost-member"]);
+
+    const element = await AboutPage({
+      params: Promise.resolve({ locale: "en" }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test double over a narrower DI surface than the real multi-type loader
+      getMdxSource: getMdxSource as any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test double
+      getMdxSlugs: getMdxSlugs as any,
+    });
+    const { container } = render(element);
+
+    const cards = container.querySelectorAll('[data-testid="team-member-card"]');
+    // The null-source "ghost-member" slug is skipped — two cards, not three.
+    expect(cards).toHaveLength(2);
+
+    const links = container.querySelectorAll('[data-testid^="member-page-link-"]');
+    const hrefs = [...links].map((l) => l.getAttribute("href"));
+    expect(hrefs).toEqual(["/about/sam-henry", "/about/wendi-henry"]);
+    for (const link of links) {
+      expect(link.textContent).toBe("View profile");
+    }
+
+    // Wendi's card shows schema.name, not title; Sam's shows title (no
+    // schema.name override) with his jobTitle as the role.
+    expect(cards[0]!.textContent).toContain("Sam Henry");
+    expect(cards[0]!.textContent).toContain("Partner");
+    expect(cards[1]!.textContent).toContain("Wendi Henry");
+    expect(cards[1]!.textContent).not.toContain("About Wendi");
+    expect(cards[1]!.textContent).not.toContain("Partner");
+
+    // The team section sits before the closing cta section in document order.
+    const html = container.innerHTML;
+    expect(html.indexOf("team-member-card")).toBeLessThan(
+      html.indexOf("Let's talk"),
+    );
+  });
+});
+
+describe("about — unchanged with zero Person pages (AC-4, C5)", () => {
+  it("renders byte-identical to a direct renderPage call", async () => {
+    const aboutSource = {
+      frontmatter: {
+        type: "AboutPage",
+        slug: "about",
+        title: "About",
+        description: "About us.",
+      },
+      body: "About us copy.",
+    };
+    const getMdxSource = jest.fn().mockResolvedValue(aboutSource);
+    const getMdxSlugs = jest.fn().mockResolvedValue([]);
+
+    const element = await AboutPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test double over a narrower DI surface than the real multi-type loader
+      getMdxSlugs: getMdxSlugs as any,
+    });
+    const { container } = render(element);
+
+    const direct = await pageRenderer.renderPage({
+      type: "AboutPage",
+      slug: "about",
+      locale: "en",
+      translationsNamespace: "about",
+      getMdxSource,
+    });
+    const { container: directContainer } = render(direct);
+
+    expect(container.innerHTML).toBe(directContainer.innerHTML);
+    expect(
+      container.querySelectorAll('[data-testid="team-member-card"]'),
+    ).toHaveLength(0);
+  });
+});
+
+describe("the sitemap and llms.txt advertise /about/<slug>, never a bare /<slug> (AC-3)", () => {
+  // The route handlers construct a Web `Response`, which jsdom (this file's
+  // test environment, needed by the React-rendering describes above) does
+  // not implement. A minimal same-shape stand-in, scoped to this describe,
+  // is enough for the one method these tests call: `.text()`.
+  let originalResponse: unknown;
+
+  beforeAll(() => {
+    originalResponse = (globalThis as { Response?: unknown }).Response;
+    class ResponseShim {
+      private readonly _body: string;
+      constructor(body: string, _init?: unknown) {
+        this._body = body;
+      }
+      async text(): Promise<string> {
+        return this._body;
+      }
+    }
+    (globalThis as { Response: unknown }).Response = ResponseShim;
+  });
+
+  afterAll(() => {
+    (globalThis as { Response?: unknown }).Response = originalResponse;
+  });
+
+  function makeStubAdapter(): ContentAdapter {
+    // eslint-disable-next-line no-restricted-syntax -- jest.fn() stubs are not assignable to ContentAdapter's generic return types; partial stub is intentional, tracked in #1073
+    return {
+      listPages: jest.fn().mockImplementation(async (type: string) => {
+        if (type === "Person") {
+          return [
+            {
+              type: "Person",
+              slug: "sam-henry",
+              title: "Sam Henry",
+              description: "Co-founder and partner.",
+            },
+          ];
+        }
+        return [];
+      }),
+      listDetail: jest.fn().mockResolvedValue([]),
+      getPageBySlug: jest.fn().mockResolvedValue(null),
+      getDetailBySlug: jest.fn().mockResolvedValue(null),
+      searchPages: jest.fn().mockResolvedValue([]),
+      extractStructuredData: jest.fn().mockResolvedValue(null),
+      createPage: jest.fn(),
+      updatePage: jest.fn(),
+      deletePage: jest.fn(),
+      getPageVersion: jest.fn(),
+    } as unknown as ContentAdapter;
+  }
+
+  beforeEach(() => {
+    process.env.NEXT_PUBLIC_ENABLED_LOCALES = "en";
+    process.env.NEXT_PUBLIC_DEFAULT_LOCALE = "en";
+    process.env.NEXT_PUBLIC_BASE_URL = "https://site.example";
+  });
+
+  afterEach(() => {
+    delete process.env.NEXT_PUBLIC_ENABLED_LOCALES;
+    delete process.env.NEXT_PUBLIC_DEFAULT_LOCALE;
+    delete process.env.NEXT_PUBLIC_BASE_URL;
+    jest.resetAllMocks();
+  });
+
+  it("sitemap.xml: one <loc> ending in /about/sam-henry, none ending in a bare /sam-henry", async () => {
+    const stubAdapter = makeStubAdapter();
+    const GET = createSitemapHandler({ getContentAdapter: () => stubAdapter });
+    const response = await GET();
+    const text = await response.text();
+    const locs = Array.from(text.matchAll(/<loc>([^<]*)<\/loc>/g)).map(
+      (m) => m[1],
+    );
+    expect(locs).toContain("https://site.example/about/sam-henry");
+    expect(locs).not.toContain("https://site.example/sam-henry");
+  });
+
+  it("llms.txt: names a URL ending in /about/sam-henry", async () => {
+    const stubAdapter = makeStubAdapter();
+    const GET = createLlmsHandler({ getContentAdapter: () => stubAdapter });
+    const response = await GET();
+    const text = await response.text();
+    expect(text).toContain("URL: https://site.example/about/sam-henry");
+    expect(text).not.toContain("URL: https://site.example/sam-henry\n");
+  });
+});

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

@@ -1,21 +1,35 @@
 // About page. Reads the AboutPage MDX frontmatter, renders sections via
 // SectionRenderer, and emits a JSON-LD <script>.
+//
+// #8650 D4 — `/about` additionally lists every `Person` page in the request's
+// locale as one generated `team` section (the `/alternatives` `withSpokes`
+// precedent, #6878 D9), each member linking to its own `/about/<slug>` page.
+// With zero `Person` pages the parsed sections are returned unchanged, so a
+// fresh scaffold (which seeds no `Person` file) renders exactly as before.
 import type {
+  getMdxSlugs as defaultGetMdxSlugs,
   getMdxSource as defaultGetMdxSource,
   getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
 import {
+  getMdxSlugs as loadMdxSlugs,
+  getMdxSource as loadMdxSource,
+  getPageSections as loadPageSections,
   renderPage,
   renderPageMetadata
 } from "@working-theory/page-renderer";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
 interface Props {
   params: Promise<{ locale: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
   getPageSections?: typeof defaultGetPageSections;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
 }
 
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
@@ -27,14 +41,82 @@ export default async function Page({
   params,
   getMdxSource,
   getPageSections,
+  getMdxSlugs,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
+  const loadSections = getPageSections ?? loadPageSections;
+  const loadSlugs = getMdxSlugs ?? loadMdxSlugs;
+  const loadSource = getMdxSource ?? loadMdxSource;
+
+  /**
+   * Append one generated `team` section listing every `Person` page (C3) —
+   * the same "the visible list and the sections that feed JSON-LD always
+   * agree" property `withSpokes` gives `/alternatives` (#6878 D9), since
+   * `renderPage` builds both the body and the JSON-LD from these sections.
+   * Returns `declared` unchanged whenever there is nothing to list, so a
+   * site with no `Person` page renders byte-identical to today (AC-4, C5).
+   */
+  async function withPeople(frontmatter: unknown): Promise<Section[]> {
+    const declared = await loadSections(frontmatter);
+    const slugs = [...(await loadSlugs("Person", locale))].sort();
+    if (slugs.length === 0) return declared;
+
+    const t = await getTranslations({ locale, namespace: "about" });
+    const label = t("viewProfile");
+
+    const sources = await Promise.all(
+      slugs.map((slug) => loadSource("Person", slug, locale)),
+    );
+
+    const members = sources.flatMap((source, i) => {
+      if (source === null) return [];
+      const slug = slugs[i]!;
+      const fm = source.frontmatter as {
+        title: string;
+        description?: string;
+        image?: string;
+        schema?: { name?: string; jobTitle?: string };
+      };
+      const name =
+        typeof fm.schema?.name === "string" ? fm.schema.name : fm.title;
+      const role =
+        typeof fm.schema?.jobTitle === "string" ? fm.schema.jobTitle : "";
+      return [
+        {
+          name,
+          role,
+          ...(typeof fm.description === "string" && {
+            bio: fm.description,
+          }),
+          ...(typeof fm.image === "string" && {
+            avatar: { src: fm.image, alt: name },
+          }),
+          links: [{ type: "page" as const, url: `/about/${slug}`, label }],
+        },
+      ];
+    });
+
+    if (members.length === 0) return declared;
+
+    const people: Section = {
+      type: "team" as const,
+      id: "people",
+      data: { variant: "with-large-images" as const, members },
+    };
+
+    const last = declared.at(-1);
+    if (last !== undefined && last.type === "cta") {
+      return [...declared.slice(0, -1), people, last];
+    }
+    return [...declared, people];
+  }
+
   return renderPage({
     type: "AboutPage",
     slug: "about",
     locale,
     translationsNamespace: "about",
+    getPageSections: withPeople,
     ...(getMdxSource !== undefined && { getMdxSource }),
-    ...(getPageSections !== undefined && { getPageSections }),
   });
 }