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

package/template/app/p1/merge/merge.css

@@ -0,0 +1,257 @@
+/* ========================================================================
+   Merge Preview Components
+   ======================================================================== */
+
+/* View Mode Selector */
+.view-mode-selector {
+  display: inline-flex;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.view-mode-selector__btn {
+  padding: 6px 14px;
+  border: none;
+  border-right: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.view-mode-selector__btn:last-child {
+  border-right: none;
+}
+
+.view-mode-selector__btn:hover {
+  background: #f3f4f6;
+}
+
+.view-mode-selector__btn--active {
+  background: #0066cc;
+  color: #fff;
+}
+
+.view-mode-selector__btn--active:hover {
+  background: #0052a3;
+}
+
+/* Merge Preview Renderer */
+.merge-preview-renderer__wrapper {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.merge-preview-renderer__summary {
+  padding: 8px 16px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+/* Side-by-side view */
+.merge-preview-renderer--side-by-side {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+
+.merge-preview-renderer__panel {
+  min-height: 300px;
+  border-right: 1px solid #e5e7eb;
+  overflow: auto;
+}
+
+.merge-preview-renderer__panel:last-child {
+  border-right: none;
+}
+
+.merge-preview-renderer__panel-label {
+  padding: 8px 12px;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.merge-preview-renderer__panel-content {
+  padding: 16px;
+}
+
+/* Overlay view */
+.merge-preview-renderer--overlay {
+  position: relative;
+  min-height: 400px;
+}
+
+.merge-preview-renderer__overlay-layer {
+  padding: 16px;
+}
+
+.merge-preview-renderer__overlay-layer--source {
+  opacity: 0.5;
+}
+
+.merge-preview-renderer__overlay-layer--target {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Slider view */
+.merge-preview-renderer--slider {
+  display: flex;
+  flex-direction: column;
+}
+
+.merge-preview-renderer__slider-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.merge-preview-renderer__slider-input {
+  flex: 1;
+  accent-color: #0066cc;
+  height: 6px;
+}
+
+.merge-preview-renderer__slider-content {
+  position: relative;
+  min-height: 400px;
+}
+
+.merge-preview-renderer__slider-layer {
+  padding: 16px;
+}
+
+.merge-preview-renderer__slider-layer--source {
+  position: relative;
+}
+
+.merge-preview-renderer__slider-layer--target {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+/* Empty state */
+.merge-preview-renderer--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+/* Merge Preview Panel */
+.merge-preview-panel__title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.merge-preview-panel__branch-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.merge-preview-panel__branch {
+  padding: 2px 8px;
+  background: #e5e7eb;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.merge-preview-panel__arrow {
+  color: #9ca3af;
+}
+
+.merge-preview-panel__empty {
+  text-align: center;
+  padding: 40px;
+  color: #9ca3af;
+}
+
+.merge-preview-panel__document-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.merge-preview-document {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.merge-preview-document__row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  transition: background 0.15s;
+}
+
+.merge-preview-document__row:hover {
+  background: #f9fafb;
+}
+
+.merge-preview-document__row--expanded {
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.merge-preview-document__path {
+  font-weight: 500;
+}
+
+.merge-preview-document__detail {
+  padding: 16px;
+}
+
+/* Diff highlight colors */
+[data-puck-diff-type="added"] {
+  outline: 2px solid #22c55e;
+  outline-offset: 2px;
+  background-color: rgba(34, 197, 94, 0.08);
+}
+
+[data-puck-diff-type="removed"] {
+  outline: 2px solid #ef4444;
+  outline-offset: 2px;
+  background-color: rgba(239, 68, 68, 0.08);
+}
+
+[data-puck-diff-type="modified"] {
+  outline: 2px solid #f59e0b;
+  outline-offset: 2px;
+  background-color: rgba(245, 158, 11, 0.08);
+}

package/template/app/p1/merge/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const MergeReviewClient = dynamic(
+  () => import("./merge-client").then((m) => ({ default: m.MergeReviewClient })),
+  { ssr: false },
+);
+
+export default function MergeReviewPage() {
+  return <MergeReviewClient />;
+}

package/template/app/page.tsx

@@ -0,0 +1,130 @@
+import Link from "next/link";
+import {
+  listRoutes,
+  ensureInitialized,
+  getPage,
+  listRouteTemplateKeysFromDatabase,
+  resolveDataTemplates,
+  resolveStringTemplates,
+  extractReferencedDatasourceIds,
+  loadRemoteDatasourceContext,
+} from "@pantheon-systems/puck-css/server";
+import type { Metadata } from "next";
+import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
+import { Client } from "./[...puckPath]/client";
+import { CollectionNav } from "./collection-nav";
+
+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(): Promise<Metadata> {
+  await initPromise;
+  const pageData = await getPage("/");
+  if (!pageData) {
+    return { title: "P1 Starter Kit" };
+  }
+
+  const rawTitle = pageData.root.props?.title;
+  if (typeof rawTitle !== "string") {
+    return { title: rawTitle };
+  }
+  if (!rawTitle.includes("{{")) {
+    return { title: rawTitle };
+  }
+  const routeTemplateKeys = await listRouteTemplateKeysFromDatabase();
+  const referencedDatasourceIds = extractReferencedDatasourceIds(pageData);
+  const context = await loadRemoteDatasourceContext({
+    searchParams: {},
+    fetchImpl: fetch,
+    pagePath: "/",
+    routeTemplateKeys,
+    builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
+    referencedDatasourceIds,
+  });
+  return { title: await resolveStringTemplates(rawTitle, context) };
+}
+
+export default async function HomePage() {
+  await initPromise;
+  const data = await getPage("/");
+
+  if (data) {
+    const routeTemplateKeys = await listRouteTemplateKeysFromDatabase();
+    const referencedDatasourceIds = extractReferencedDatasourceIds(data);
+    const context = await loadRemoteDatasourceContext({
+      searchParams: {},
+      fetchImpl: fetch,
+      pagePath: "/",
+      routeTemplateKeys,
+      builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
+      referencedDatasourceIds,
+    });
+    const resolvedData = await resolveDataTemplates(data, context);
+    return <Client data={resolvedData} />;
+  }
+
+  const routes = await listRoutes();
+
+  const staticPages = routes.filter((r) => r.kind === "static");
+  const templates = routes.filter((r) => r.kind === "template");
+
+  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">
+          Welcome to the P1 Starter Kit
+        </h1>
+        <p className="mt-4 text-gray-600">
+          Build and manage pages with the visual editor, or head to the
+          dashboard to manage your site.
+        </p>
+
+        <nav className="mt-10 flex flex-col gap-3">
+          <Link
+            href="/p1"
+            className="rounded-lg bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:bg-gray-700"
+          >
+            Open the Page Editor
+          </Link>
+          <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>
+
+        {(staticPages.length > 0 || templates.length > 0) && (
+          <div className="mt-10 text-left">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">Pages</h2>
+            <ul className="space-y-3">
+              {staticPages.map((route) => (
+                <li key={route.path}>
+                  <Link
+                    href={route.path}
+                    className="text-sm font-mono text-blue-600 hover:underline"
+                  >
+                    {route.path}
+                  </Link>
+                </li>
+              ))}
+              {templates.map((route) => (
+                <li key={route.path}>
+                  <CollectionNav templatePath={route.path} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+export const dynamic = "force-dynamic";

package/template/app/styles.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+body {
+  margin: 0;
+}
+
+/* Prevent Tailwind's preflight from blowing up Puck's sidebar/UI icons.
+   Puck's SVG icons rely on their inline width/height attributes;
+   Tailwind's preflight sets svg { display: block } which makes them fill their container. */
+[class*="_Drawer"] svg,
+[class*="_ComponentList"] svg,
+[class*="_ActionBar"] svg,
+[class*="_DraggableComponent"] svg,
+[class*="_SidebarSection"] svg,
+[class*="_Puck"] svg {
+  display: inline-block;
+  vertical-align: middle;
+}

package/template/components/puck/block-padding.ts

@@ -0,0 +1,2 @@
+/** Horizontal 64px / vertical 24px — shared by Puck blocks */
+export const blockPaddingClass = "px-16 py-6";

package/template/components/puck/button-block.tsx

@@ -0,0 +1,41 @@
+import { blockPaddingClass } from "./block-padding";
+
+export const buttonBlock = {
+  label: "Button",
+  fields: {
+    label: { type: "text" as const, label: "Label" },
+    href: { type: "text" as const, label: "Link URL" },
+    openInNewTab: {
+      type: "radio" as const,
+      label: "Open in new tab",
+      options: [
+        { label: "No", value: false },
+        { label: "Yes", value: true },
+      ],
+    },
+  },
+  defaultProps: {
+    label: "Learn more",
+    href: "#",
+    openInNewTab: false,
+  },
+  render: ({
+    label,
+    href,
+    openInNewTab,
+  }: {
+    label?: string;
+    href?: string;
+    openInNewTab?: boolean;
+  }) => (
+    <div className={blockPaddingClass}>
+      <a
+        href={href || "#"}
+        {...(openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+        className="inline-block rounded-lg bg-neutral-900 px-6 py-3 font-semibold text-white no-underline"
+      >
+        {label}
+      </a>
+    </div>
+  ),
+};

package/template/components/puck/divider-block.tsx

@@ -0,0 +1,10 @@
+export const dividerBlock = {
+  label: "Divider",
+  fields: {},
+  defaultProps: {},
+  render: () => (
+    <div className="px-16 py-4">
+      <hr className="m-0 border-0 border-t border-neutral-300" />
+    </div>
+  ),
+};

package/template/components/puck/grid-block.tsx

@@ -0,0 +1,80 @@
+import { blockPaddingClass } from "./block-padding";
+import { Connectable, type ConnectedItem } from "@pantheon-systems/puck-css/connectable";
+
+function CardGrid({
+  title,
+  items,
+}: {
+  title?: string;
+  items: ConnectedItem[];
+}) {
+  return (
+    <section className={blockPaddingClass}>
+      {title ? (
+        <h2 className="m-0 mb-4 text-2xl font-semibold">{title}</h2>
+      ) : null}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+        {items.map((item, index) => {
+          const id = String(item.id ?? "").trim();
+          const className =
+            "rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:border-blue-400 hover:shadow-md";
+          if (item._href) {
+            return (
+              <a
+                key={`${id}-${index}`}
+                href={item._href}
+                className={`${className} no-underline`}
+              >
+                <div className="text-sm text-slate-500">
+                  {id ? `#${id}` : "No ID"}
+                </div>
+                <div className="mt-1 text-base font-semibold text-slate-900">
+                  {item._title}
+                </div>
+              </a>
+            );
+          }
+          return (
+            <div key={`${id}-${index}`} className={className}>
+              <div className="text-sm text-slate-500">
+                {id ? `#${id}` : "No ID"}
+              </div>
+              <div className="mt-1 text-base font-semibold text-slate-900">
+                {item._title}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+const ConnectableCardGrid = Connectable(CardGrid);
+
+export const gridBlock = {
+  label: "Card Grid",
+  fields: {
+    title: { type: "text" as const, label: "Heading" },
+    items: {
+      type: "textarea" as const,
+      label: "Items datasource (e.g. {{ swapi_list.items }})",
+    },
+    min: { type: "number" as const, label: "Min cards" },
+    max: { type: "number" as const, label: "Max cards" },
+    itemTitleTemplate: { type: "text" as const, label: "Item title template" },
+    itemUrlTemplate: {
+      type: "text" as const,
+      label: "Optional item URL template (e.g. /jedi/{id} or {{ item.url }})",
+    },
+  },
+  defaultProps: {
+    title: "Cards",
+    items: "{{ swapi_list.items }}",
+    min: 1,
+    max: 12,
+    itemTitleTemplate: "title is {{ item.name }}",
+    itemUrlTemplate: "/jedi/{id}",
+  },
+  render: ConnectableCardGrid,
+};

package/template/components/puck/heading-block.tsx

@@ -0,0 +1,38 @@
+import { blockPaddingClass } from "./block-padding";
+
+const levelClass: Record<"h1" | "h2" | "h3" | "h4", string> = {
+  h1: "text-4xl",
+  h2: "text-3xl",
+  h3: "text-2xl",
+  h4: "text-xl",
+};
+
+export const headingBlock = {
+  label: "Heading",
+  fields: {
+    title: { type: "text" as const, label: "Text" },
+    level: {
+      type: "select" as const,
+      label: "Level",
+      options: [
+        { label: "H1", value: "h1" },
+        { label: "H2", value: "h2" },
+        { label: "H3", value: "h3" },
+        { label: "H4", value: "h4" },
+      ],
+    },
+  },
+  defaultProps: {
+    title: "Heading",
+    level: "h1" as const,
+  },
+  render: ({ title, level }: { title?: string; level?: string }) => {
+    const L = (level ?? "h1") as "h1" | "h2" | "h3" | "h4";
+    const size = levelClass[L] ?? levelClass.h1;
+    return (
+      <div className={blockPaddingClass}>
+        <L className={`m-0 font-bold leading-tight ${size}`}>{title}</L>
+      </div>
+    );
+  },
+};

package/template/components/puck/image-block.tsx

@@ -0,0 +1,33 @@
+import { blockPaddingClass } from "./block-padding";
+
+export const imageBlock = {
+  label: "Image",
+  fields: {
+    src: { type: "text" as const, label: "Image URL" },
+    alt: { type: "text" as const, label: "Alt text" },
+    caption: { type: "textarea" as const, label: "Caption (optional)" },
+  },
+  defaultProps: {
+    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80",
+    alt: "Mountain landscape",
+    caption: "",
+  },
+  render: ({ src, alt, caption }: { src?: string; alt?: string; caption?: string }) => (
+    <figure className={`m-0 ${blockPaddingClass}`}>
+      {src ? (
+        <img
+          src={src}
+          alt={alt || ""}
+          className="block h-auto max-h-[400px] w-full max-w-4xl rounded-lg object-contain"
+        />
+      ) : (
+        <div className="flex max-h-[400px] min-h-[200px] max-w-4xl items-center justify-center rounded-lg bg-neutral-200 text-neutral-600">
+          Add an image URL
+        </div>
+      )}
+      {caption ? (
+        <figcaption className="mt-3 max-w-4xl text-sm text-neutral-600">{caption}</figcaption>
+      ) : null}
+    </figure>
+  ),
+};

package/template/components/puck/list-block.tsx

@@ -0,0 +1,72 @@
+import { blockPaddingClass } from "./block-padding";
+
+/** One line = `[label](href)` (from `{{ swapi_list.markdownLinks }}` or arg form) or plain text. */
+const MARKDOWN_LINK_LINE = /^\[([^\]]*)\]\(([^)]+)\)$/;
+
+export const listBlock = {
+  label: "List",
+  fields: {
+    ordered: {
+      type: "radio" as const,
+      label: "Style",
+      options: [
+        { label: "Bulleted", value: false },
+        { label: "Numbered", value: true },
+      ],
+    },
+    items: {
+      type: "textarea" as const,
+      label: "Items (one per line)",
+    },
+  },
+  defaultProps: {
+    ordered: false,
+    items: "First item\nSecond item\nThird item",
+  },
+  render: ({ ordered, items }: { ordered?: boolean; items?: string }) => {
+    const lines = (items || "")
+      .split("\n")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const ListTag = ordered ? "ol" : "ul";
+    const listClass = ordered ? "list-decimal" : "list-disc";
+    return (
+      <div className={blockPaddingClass}>
+        <ListTag className={`m-0 max-w-prose space-y-1 pl-6 leading-relaxed ${listClass}`}>
+          {lines.map((line, i) => {
+            const m = line.match(MARKDOWN_LINK_LINE);
+            if (m) {
+              const href = m[2];
+              const safe =
+                href.startsWith("/") ||
+                href.startsWith("./") ||
+                /^https?:\/\//i.test(href);
+              if (!safe) {
+                return (
+                  <li key={i} className="break-words">
+                    {line}
+                  </li>
+                );
+              }
+              return (
+                <li key={i} className="break-words">
+                  <a
+                    href={href}
+                    className="text-blue-700 underline decoration-blue-700/40 underline-offset-2 hover:decoration-blue-700"
+                  >
+                    {m[1]}
+                  </a>
+                </li>
+              );
+            }
+            return (
+              <li key={i} className="break-words">
+                {line}
+              </li>
+            );
+          })}
+        </ListTag>
+      </div>
+    );
+  },
+};