@pantheon-systems/create-p1-starter-kit 0.1.0

package/template/__tests__/remote-datasource-fetchers.test.ts

@@ -0,0 +1,226 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@pantheon-systems/cpub-react-sdk/server", () => ({
+  PCCConvenienceFunctions: {
+    getPaginatedArticles: vi.fn(),
+    getArticleBySlugOrId: vi.fn(),
+  },
+}));
+
+// We need to mock the user-remote-datasource-store since loadRemoteDatasourceContext uses it
+vi.mock("@pantheon-systems/puck-css/server", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return actual;
+});
+
+import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
+import type { RemoteDatasourceFetcherParams } from "@pantheon-systems/puck-css/server";
+
+const { PCCConvenienceFunctions } = await import(
+  "@pantheon-systems/cpub-react-sdk/server"
+);
+const mockGetPaginatedArticles = PCCConvenienceFunctions
+  .getPaginatedArticles as ReturnType<typeof vi.fn>;
+const mockGetArticleBySlugOrId = PCCConvenienceFunctions
+  .getArticleBySlugOrId as ReturnType<typeof vi.fn>;
+
+function makeFetcherParams(
+  overrides: Partial<RemoteDatasourceFetcherParams> = {},
+): RemoteDatasourceFetcherParams {
+  return {
+    searchParams: {},
+    urlParams: {},
+    savedPreviewParams: {},
+    fetchImpl: vi.fn() as unknown as typeof fetch,
+    ...overrides,
+  };
+}
+
+function getFetcher(id: string) {
+  const f = REMOTE_DATASOURCE_FETCHERS.find((f) => f.id === id);
+  if (!f) throw new Error(`No fetcher with id "${id}"`);
+  return f;
+}
+
+describe("swapi fetcher", () => {
+  const fetcher = getFetcher("swapi");
+
+  it("returns {} when no id is available", async () => {
+    const result = await fetcher.fetch(makeFetcherParams());
+    expect(result).toEqual({});
+  });
+
+  it("returns {} on non-OK response", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      json: async () => ({}),
+    });
+    const result = await fetcher.fetch(makeFetcherParams({
+      searchParams: { id: "1" },
+      fetchImpl,
+    }));
+    expect(result).toEqual({});
+    expect(fetchImpl).toHaveBeenCalledWith("https://swapi.info/api/people/1");
+  });
+
+  it("returns parsed JSON on success", async () => {
+    const payload = { name: "Luke Skywalker", height: "172" };
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => payload,
+    });
+    const result = await fetcher.fetch(makeFetcherParams({
+      searchParams: { id: "1" },
+      fetchImpl,
+    }));
+    expect(result).toEqual(payload);
+  });
+
+  it("uses urlParams.id when searchParams has no id", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ name: "FromPath" }),
+    });
+    const result = await fetcher.fetch(makeFetcherParams({
+      urlParams: { id: "5" },
+      fetchImpl,
+    }));
+    expect(result).toEqual({ name: "FromPath" });
+    expect(fetchImpl).toHaveBeenCalledWith("https://swapi.info/api/people/5");
+  });
+
+  it("prefers query id over path id", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ name: "Q" }),
+    });
+    await fetcher.fetch(makeFetcherParams({
+      searchParams: { id: "2" },
+      urlParams: { id: "9" },
+      fetchImpl,
+    }));
+    expect(fetchImpl).toHaveBeenCalledWith("https://swapi.info/api/people/2");
+  });
+});
+
+describe("swapi_list fetcher", () => {
+  const fetcher = getFetcher("swapi_list");
+
+  it("maps results to { items: [...] }", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [
+        { name: "Luke", url: "https://swapi.info/api/people/1" },
+      ],
+    });
+    const result = await fetcher.fetch(makeFetcherParams({ fetchImpl }));
+    expect(result).toEqual({
+      items: [{ id: "1", name: "Luke", url: "https://swapi.info/api/people/1" }],
+    });
+    expect(fetchImpl).toHaveBeenCalledWith("https://swapi.info/api/people");
+  });
+});
+
+describe("monster fetcher", () => {
+  const fetcher = getFetcher("monster");
+
+  it("returns {} when no index available", async () => {
+    const result = await fetcher.fetch(makeFetcherParams());
+    expect(result).toEqual({});
+  });
+
+  it("returns parsed pokemon on success", async () => {
+    const payload = {
+      data: {
+        getPokemon: {
+          key: "bulbasaur",
+          species: "Bulbasaur",
+          num: 1,
+          types: ["Grass", "Poison"],
+        },
+      },
+    };
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => payload,
+    });
+    const result = await fetcher.fetch(makeFetcherParams({
+      searchParams: { monster: "bulbasaur" },
+      fetchImpl,
+    }));
+    expect(result).toEqual({
+      key: "bulbasaur",
+      species: "Bulbasaur",
+      num: 1,
+      types: ["Grass", "Poison"],
+      index: "bulbasaur",
+      name: "Bulbasaur",
+      url: "/pokemon/bulbasaur",
+    });
+  });
+});
+
+describe("monster_list fetcher", () => {
+  const fetcher = getFetcher("monster_list");
+
+  it("maps results to { items: [...] }", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        data: {
+          getAllPokemon: [
+            { key: "bulbasaur", species: "Bulbasaur" },
+          ],
+        },
+      }),
+    });
+    const result = await fetcher.fetch(makeFetcherParams({ fetchImpl }));
+    expect(result).toEqual({
+      items: [{ index: "bulbasaur", name: "Bulbasaur", url: "/pokemon/bulbasaur" }],
+    });
+  });
+});
+
+describe("article fetcher", () => {
+  const fetcher = getFetcher("article");
+
+  it("returns {} when no article id", async () => {
+    const result = await fetcher.fetch(makeFetcherParams());
+    expect(result).toEqual({});
+  });
+
+  it("loads a single article", async () => {
+    mockGetArticleBySlugOrId.mockResolvedValueOnce({
+      id: "first-article",
+      title: "First Article",
+    });
+    const result = await fetcher.fetch(makeFetcherParams({
+      searchParams: { article: "first-article" },
+    }));
+    expect(result).toEqual({ id: "first-article", title: "First Article" });
+    expect(mockGetArticleBySlugOrId).toHaveBeenCalledWith("first-article", {
+      contentType: "TEXT_MARKDOWN",
+    });
+  });
+});
+
+describe("article_list fetcher", () => {
+  const fetcher = getFetcher("article_list");
+
+  it("maps list payload items to normalized article rows", async () => {
+    mockGetPaginatedArticles.mockResolvedValueOnce({
+      data: [
+        { id: "a1", title: "First Article", slug: "first-article" },
+        { id: 2, attributes: { title: "Second Article", slug: "second-article" } },
+      ],
+    });
+    const result = await fetcher.fetch(makeFetcherParams());
+    expect(result).toEqual({
+      items: [
+        { id: "a1", title: "First Article", slug: "first-article", url: undefined },
+        { id: "2", title: "Second Article", slug: "second-article", url: undefined },
+      ],
+    });
+  });
+});

package/template/app/[...puckPath]/client.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import type { Data } from "@puckeditor/core";
+import { RenderClient } from "@pantheon-systems/puck-css";
+import config from "../../puck.config";
+
+export function Client({ data }: { data: Data }) {
+  return <RenderClient config={config} data={data} />;
+}

package/template/app/[...puckPath]/page.tsx

@@ -0,0 +1,131 @@
+/**
+ * Catch-all route that renders user-facing pages generated by Puck.
+ */
+
+import { Client } from "./client";
+import { Metadata } from "next";
+import {
+  loadRemoteDatasourceContext,
+  extractReferencedDatasourceIds,
+  getPage,
+  listRouteTemplateKeysFromDatabase,
+  resolveDataTemplates,
+  resolveStringTemplates,
+  ensureInitialized,
+  pagePathFromCatchAllSegments,
+} from "@pantheon-systems/puck-css/server";
+import { REMOTE_DATASOURCE_FETCHERS } from "../../lib/remote-datasource-fetchers";
+
+const initPromise = ensureInitialized({
+  p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
+  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+});
+
+export async function generateMetadata({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}): Promise<Metadata> {
+  await initPromise;
+  const { puckPath = [] } = await params;
+  const path = pagePathFromCatchAllSegments(puckPath);
+
+  const [pageData, sp, routeTemplateKeys] = await Promise.all([
+    getPage(path),
+    searchParams,
+    listRouteTemplateKeysFromDatabase(),
+  ]);
+
+  const rawTitle = pageData?.root.props?.title;
+  if (typeof rawTitle !== "string") {
+    return { title: rawTitle };
+  }
+  if (!rawTitle.includes("{{")) {
+    return { title: rawTitle };
+  }
+  const referencedDatasourceIds = extractReferencedDatasourceIds(pageData);
+  const context = await loadRemoteDatasourceContext({
+    searchParams: sp,
+    fetchImpl: fetch,
+    pagePath: path,
+    routeTemplateKeys,
+    builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
+    referencedDatasourceIds,
+  });
+  return { title: await resolveStringTemplates(rawTitle, context) };
+}
+
+export default async function Page({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ puckPath: string[] }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  await initPromise;
+  const { puckPath = [] } = await params;
+  const path = pagePathFromCatchAllSegments(puckPath);
+
+  const [data, searchParamData, routeTemplateKeys] = await Promise.all([
+    getPage(path),
+    searchParams,
+    listRouteTemplateKeysFromDatabase(),
+  ]);
+
+  if (!data) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-gray-50">
+        <div className="mx-auto max-w-lg px-6 py-16 text-center">
+          <h1 className="text-3xl font-bold tracking-tight text-gray-900">
+            404 &ndash; This page doesn&apos;t exist yet
+          </h1>
+          <p className="mt-4 text-gray-600">
+            This page hasn&apos;t been created. Use the editor to build it.
+          </p>
+
+          <nav className="mt-10 flex flex-col gap-3">
+            <a
+              href={`/p1${path}`}
+              className="rounded-lg bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:bg-gray-700"
+            >
+              Edit this page
+            </a>
+            <a
+              href="/p1"
+              className="rounded-lg border border-gray-300 px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"
+            >
+              Open the Page Editor
+            </a>
+            <a
+              href="https://staging.content.pantheon.io/dashboard/sites"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-lg border border-gray-300 px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"
+            >
+              P1 Dashboard &rarr;
+            </a>
+          </nav>
+        </div>
+      </main>
+    );
+  }
+
+  const referencedDatasourceIds = extractReferencedDatasourceIds(data);
+  const context = await loadRemoteDatasourceContext({
+    searchParams: searchParamData,
+    fetchImpl: fetch,
+    pagePath: path,
+    routeTemplateKeys,
+    builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
+    referencedDatasourceIds,
+  });
+  const resolvedData = await resolveDataTemplates(data, context);
+
+  return <Client data={resolvedData} />;
+}
+
+export const dynamic = "force-dynamic";

package/template/app/collection-nav.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function CollectionNav({ templatePath }: { templatePath: string }) {
+  const router = useRouter();
+  const segments = templatePath.split("/");
+  const params = segments
+    .filter((s) => s.startsWith(":"))
+    .map((s) => s.slice(1));
+
+  const [values, setValues] = useState<Record<string, string>>(
+    Object.fromEntries(params.map((p) => [p, ""])),
+  );
+
+  function handleGo() {
+    if (!params.every((p) => values[p])) return;
+    const resolved = segments
+      .map((s) => (s.startsWith(":") ? encodeURIComponent(values[s.slice(1)]) : s))
+      .join("/");
+    router.push(resolved);
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-sm text-gray-500 font-mono">{templatePath}</span>
+      {params.map((param) => (
+        <input
+          key={param}
+          type="text"
+          placeholder={param}
+          value={values[param]}
+          onChange={(e) => setValues({ ...values, [param]: e.target.value })}
+          onKeyDown={(e) => e.key === "Enter" && handleGo()}
+          className="rounded border border-gray-300 px-2 py-1 text-sm w-24"
+        />
+      ))}
+      <button
+        onClick={handleGo}
+        className="rounded bg-gray-900 px-3 py-1 text-sm text-white hover:bg-gray-700"
+      >
+        Go
+      </button>
+    </div>
+  );
+}

package/template/app/layout.tsx

@@ -0,0 +1,13 @@
+import "./styles.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/template/app/p1/[[...p1]]/editor-client.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Puck } from "@puckeditor/core";
+import {
+  P1App,
+  createNextConfig,
+  useP1Editor,
+  useP1Plugins,
+  wrapConfigForEditorPreview,
+  P1QueryProvider,
+} from "@pantheon-systems/puck-css";
+import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
+import type { Checkpoint } from "@pantheon-systems/puck-css";
+
+import "@pantheon-systems/puck-css/styles.css";
+import "@pantheon-systems/puck-css/pds/styles.css";
+
+import config from "../../../puck.config";
+
+let p1Config: ReturnType<typeof createNextConfig> | null = null;
+let p1ConfigError: string | null = null;
+
+try {
+  p1Config = createNextConfig();
+} catch (e) {
+  p1ConfigError = e instanceof Error ? e.message : String(e);
+}
+
+const editorConfig = wrapConfigForEditorPreview(config);
+
+export function EditorClientWrapper({ path }: { path: string }) {
+  if (!p1Config) {
+    return (
+      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
+        <h3>Editor unavailable</h3>
+        <p style={{ color: "#666" }}>
+          {p1ConfigError ?? "P1 configuration is missing."}
+        </p>
+        <p style={{ color: "#888", fontSize: "14px" }}>
+          Set NEXT_PUBLIC_CSS_BASE_URL and NEXT_PUBLIC_CSS_SITE_ID environment
+          variables to enable the editor.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <P1QueryProvider>
+      <P1NextRouterProvider>
+        <P1App
+          config={p1Config}
+          loginPageProps={{ title: "P1 Starter", subtitle: "Sign in to edit" }}
+        >
+          <EditorContent path={path} />
+        </P1App>
+      </P1NextRouterProvider>
+    </P1QueryProvider>
+  );
+}
+
+function EditorContent({ path }: { path: string }) {
+  const router = useRouter();
+  const p1Plugins = useP1Plugins(path, config);
+
+  const handleDocumentSelect = useCallback(
+    (docPath: string) => {
+      router.push(`/p1/${docPath}`);
+    },
+    [router],
+  );
+
+  const { loading, error, puckKey, puckProps } = useP1Editor({
+    documentPath: path,
+    puckConfig: editorConfig,
+    additionalPlugins: p1Plugins,
+    pluginOptions: {
+      onDocumentSelect: handleDocumentSelect,
+      selectedDocumentPath: path,
+    },
+    overrideOptions: {
+      showDefaultPublish: false,
+      onPublishSuccess: (checkpoint: Checkpoint) => {
+        alert(`Published: ${checkpoint.name ?? checkpoint.id}`);
+      },
+      onPublishError: (err: Error) => {
+        alert(`Publish failed: ${err.message}`);
+      },
+    },
+  });
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
+        Loading editor...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
+        <h3>Error loading document</h3>
+        <p style={{ color: "#666" }}>{error.message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="puck-editor-theme">
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <Puck key={puckKey} {...puckProps as any} _experimentalFullScreenCanvas={true} />
+    </div>
+  );
+}

package/template/app/p1/[[...p1]]/page.tsx

@@ -0,0 +1,19 @@
+import "@puckeditor/core/puck.css";
+import { createP1Pages } from "@pantheon-systems/p1-next-sdk/server";
+import config from "../../../puck.config";
+import { EditorClientWrapper } from "./editor-client";
+import { RenderClientWrapper } from "./render-client";
+
+const pages = createP1Pages({
+  config,
+  p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
+  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+  EditorClient: EditorClientWrapper,
+  RenderClient: RenderClientWrapper,
+});
+
+export default pages.Page;
+export const generateMetadata = pages.generateMetadata;
+export const dynamic = "force-dynamic";

package/template/app/p1/[[...p1]]/render-client.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import type { Data } from "@puckeditor/core";
+import { RenderClient } from "@pantheon-systems/puck-css";
+import config from "../../../puck.config";
+
+export function RenderClientWrapper({ data }: { data: Data }) {
+  return <RenderClient config={config} data={data} />;
+}

package/template/app/p1/api/[...p1]/route.ts

@@ -0,0 +1,16 @@
+import { createP1Handler } from "@pantheon-systems/p1-next-sdk/server";
+import config from "../../../../puck.config";
+import { REMOTE_DATASOURCE_FETCHERS } from "../../../../lib/remote-datasource-fetchers";
+import { REMOTE_DATASOURCE_REGISTRY } from "../../../../lib/remote-datasources";
+
+const handler = createP1Handler({
+  config,
+  p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
+  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+  builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
+  builtinDatasourceRegistry: REMOTE_DATASOURCE_REGISTRY,
+});
+
+export const { GET, POST, DELETE } = handler;

package/template/app/p1/auth/[...action]/route.ts

@@ -0,0 +1,9 @@
+import { createP1AuthHandler } from "@pantheon-systems/p1-next-sdk/server";
+
+const handler = createP1AuthHandler({
+  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
+  prompt: 'login',
+});
+
+export const { POST } = handler;