@cmssy/cli 10.9.2 → 11.0.0

package/assets/init/next/app/[[...path]]/page.tsx

@@ -1,29 +1,53 @@
-import { createCmssyPage } from "@cmssy/next/server";
+import { createCmssyPage, CmssyLayoutSlot } from "@cmssy/next/server";
 import { cmssy } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
-import { CmssyLayoutSlot } from "@/cmssy/layout-slot";
+import { EditableLayout } from "@/cmssy/editable-layout";
+import { publishedPaths } from "@/services/pages";
 
 type PageProps = {
   params: Promise<{ path?: string[] }>;
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 };
 
+// Three lines that decide whether this site is cached at all. Without
+// generateStaticParams a catch-all is rendered on demand every time and
+// `revalidate` is ignored - the build prints a blank Revalidate column, which is
+// the only warning you get. `dynamicParams` keeps pages published after the
+// build working: first request renders them, and they cache from then on.
+export const revalidate = 3600;
+export const dynamicParams = true;
+
+export function generateStaticParams() {
+  return publishedPaths();
+}
+
 const CmssyPage = createCmssyPage(cmssy, blocks, { editor: CmssyEditor });
 
-// The header and the footer are layout blocks, mounted here rather than in
-// app/layout.tsx: this route knows its path, and the language prefix in that
-// path is what says which language to render them in. Reading it from the
+// The header and footer are layout blocks. They are mounted here rather than in
+// app/layout.tsx because this route knows its path, and the language prefix in
+// that path is what says which language to render them in - reading it from the
 // request header instead would make every page dynamic.
 export default async function Page(props: PageProps) {
   const { path } = await props.params;
+  const slot = (position: "header" | "footer") => (
+    <CmssyLayoutSlot
+      config={cmssy}
+      blocks={blocks}
+      position={position}
+      path={path ?? []}
+      editMode={false}
+      editable={EditableLayout}
+    />
+  );
+
   return (
     <>
-      <CmssyLayoutSlot position="header" path={path} />
+      {slot("header")}
       <main>
         <CmssyPage {...props} />
       </main>
-      <CmssyLayoutSlot position="footer" path={path} />
+      {slot("footer")}
     </>
   );
 }

package/assets/init/next/app/cmssy-edit/[[...path]]/page.tsx

@@ -1,8 +1,12 @@
-import { createCmssyEditPage } from "@cmssy/next/server";
+import {
+  createCmssyEditPage,
+  CmssyLayoutSlot,
+  isCmssyEditMode,
+} from "@cmssy/next/server";
 import { cmssy } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
-import { CmssyLayoutSlot } from "@/cmssy/layout-slot";
+import { EditableLayout } from "@/cmssy/editable-layout";
 
 // The route the middleware rewrites a verified editor request onto. The public
 // pages stay static, and a static page never sees the query string that would
@@ -24,13 +28,31 @@ const CmssyEditPage = createCmssyEditPage(cmssy, blocks, {
 // header missing here is a header missing in the editor.
 export default async function EditPage(props: PageProps) {
   const { path } = await props.params;
+
+  // Not a hard `true`: this route is reachable directly, and only the proxy's
+  // verified rewrite sets the edit header. Hard-coding it would fetch layouts
+  // with the draft secret for anyone who typed the URL. Reading a header costs
+  // nothing here - the route is force-dynamic either way.
+  const editMode = await isCmssyEditMode();
+
+  const slot = (position: "header" | "footer") => (
+    <CmssyLayoutSlot
+      config={cmssy}
+      blocks={blocks}
+      position={position}
+      path={path ?? []}
+      editMode={editMode}
+      editable={EditableLayout}
+    />
+  );
+
   return (
     <>
-      <CmssyLayoutSlot position="header" path={path} />
+      {slot("header")}
       <main>
         <CmssyEditPage {...props} />
       </main>
-      <CmssyLayoutSlot position="footer" path={path} />
+      {slot("footer")}
     </>
   );
 }

package/assets/init/next/services/pages.ts

@@ -0,0 +1,58 @@
+import { createCmssyClient } from "@cmssy/core";
+import { cmssy } from "@/cmssy.config";
+
+// Your query, in your repo. The SDK does not mirror the graph - it gives you a
+// client and gets out of the way, so adding a field here is your call and not a
+// release of ours.
+const PUBLISHED_PAGES = `query PublishedPages($workspaceSlug: String!) {
+  public {
+    page {
+      list(workspaceSlug: $workspaceSlug) {
+        slug
+        publishedAt
+      }
+    }
+  }
+}`;
+
+type PublishedPages = {
+  public?: {
+    page?: { list?: { slug?: string | null; publishedAt?: string | null }[] | null } | null;
+  } | null;
+};
+
+const client = createCmssyClient({
+  apiUrl: cmssy.apiUrl,
+  org: cmssy.org,
+  workspaceSlug: cmssy.workspaceSlug,
+});
+
+/**
+ * The paths to prerender, as `generateStaticParams` wants them.
+ *
+ * A catch-all route with no params generated is served on demand and cached by
+ * nothing, whatever `revalidate` says - so this function is what makes the
+ * route cacheable at all, not an optimisation on top of it.
+ */
+export async function publishedPaths(): Promise<{ path: string[] }[]> {
+  const data = await client.query<PublishedPages>(
+    PUBLISHED_PAGES,
+    { workspaceSlug: cmssy.workspaceSlug },
+    {
+      // `public` routes through the org-scoped delivery path. Without it the
+      // request lands on the base endpoint, where an unauthenticated workspace
+      // lookup is by slug alone - across every org.
+      public: true,
+      // A build reads this once. A single 429 from the delivery API would fail
+      // the whole deploy, so retry - it is a read, nothing to double-apply.
+      retry: {},
+    },
+  );
+
+  const pages = data?.public?.page?.list ?? [];
+  return pages
+    .filter((page) => page.publishedAt)
+    .map((page) => ({
+      path: (page.slug ?? "").split("/").filter(Boolean),
+    }));
+}

package/dist/index.js

@@ -161,14 +161,14 @@ var FRAMEWORKS = [
     label: "Next.js",
     createCommand: "npx create-next-app@latest",
     detect: ["next"],
-    dependencies: ["@cmssy/next", "@cmssy/react"],
+    dependencies: ["@cmssy/next", "@cmssy/react", "@cmssy/core"],
     files: [
       "cmssy.config.ts",
       "proxy.ts",
+      "services/pages.ts",
       "cmssy/blocks.ts",
       "cmssy/editor.tsx",
       "cmssy/editable-layout.tsx",
-      "cmssy/layout-slot.tsx",
       "blocks/hero/block.ts",
       "blocks/hero/Hero.tsx",
       "app/[[...path]]/page.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/cli",
-  "version": "10.9.2",
+  "version": "11.0.0",
   "description": "The cmssy CLI: `cmssy init` wires cmssy into an existing Next.js, Astro or React Router app; `cmssy link` connects it to a workspace and verifies the editor wiring.",
   "keywords": [
     "cmssy",
@@ -27,7 +27,7 @@
     "assets"
   ],
   "dependencies": {
-    "@cmssy/core": "10.9.2"
+    "@cmssy/core": "11.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/assets/init/next/cmssy/layout-slot.tsx

@@ -1,172 +0,0 @@
-import { cache } from "react";
-import {
-  CmssyServerLayout,
-  graphqlRequest,
-  resolveEditorLayoutBlockData,
-} from "@cmssy/react";
-import type { CmssyLayoutGroup } from "@cmssy/react";
-import { resolveEditorOrigin } from "@cmssy/next";
-import { isCmssyEditMode } from "@cmssy/next/server";
-import { cmssy } from "@/cmssy.config";
-import { blocks } from "@/cmssy/blocks";
-import { EditableLayout } from "@/cmssy/editable-layout";
-
-// The header and the footer are layout blocks: content, not markup. Fetching
-// and rendering them is your app's, so both queries live here.
-const LAYOUTS_QUERY = `query PublicPageLayouts($workspaceSlug: String!, $pageSlug: String!, $previewSecret: String) {
-  public {
-    page {
-      layouts(workspaceSlug: $workspaceSlug, pageSlug: $pageSlug, previewSecret: $previewSecret) {
-        position
-        blocks { id type content style advanced order isActive }
-        settings { desktopWidth mobileBehavior }
-      }
-    }
-  }
-}`;
-
-const SITE_CONFIG_QUERY = `query PublicSiteConfig($workspaceSlug: String!) {
-  public {
-    siteConfig(workspaceSlug: $workspaceSlug) {
-      defaultLanguage
-      enabledLanguages
-    }
-  }
-}`;
-
-// Both slots render on every page; `cache` makes that one request each.
-const fetchLayouts = cache(
-  async (pageSlug: string, previewSecret: string | null) => {
-    try {
-      const data = await graphqlRequest<{
-        public?: { page?: { layouts?: CmssyLayoutGroup[] | null } | null } | null;
-      }>(
-        cmssy,
-        LAYOUTS_QUERY,
-        { workspaceSlug: cmssy.workspaceSlug, pageSlug, previewSecret },
-        { public: true, retry: {} },
-        "page layouts",
-      );
-      return data.public?.page?.layouts ?? [];
-    } catch (error) {
-      console.error("[cmssy] page layouts could not be fetched", error);
-      return [];
-    }
-  },
-);
-
-const fetchLocales = cache(async () => {
-  try {
-    const data = await graphqlRequest<{
-      public?: {
-        siteConfig?: {
-          defaultLanguage: string | null;
-          enabledLanguages: string[] | null;
-        } | null;
-      } | null;
-    }>(
-      cmssy,
-      SITE_CONFIG_QUERY,
-      { workspaceSlug: cmssy.workspaceSlug },
-      { public: true, retry: {} },
-      "site config",
-    );
-    const config = data.public?.siteConfig;
-    // The languages are the workspace's, never this repo's.
-    const defaultLocale = config?.defaultLanguage ?? "";
-    const enabled = config?.enabledLanguages ?? [];
-    return {
-      defaultLocale,
-      locales: enabled.length > 0 ? enabled : defaultLocale ? [defaultLocale] : [],
-    };
-  } catch (error) {
-    console.error("[cmssy] site config could not be fetched", error);
-    return { defaultLocale: "", locales: [] as string[] };
-  }
-});
-
-export interface CmssyLayoutSlotProps {
-  position: "header" | "footer";
-  /**
-   * The catch-all segments of the route rendering this slot, as routed. The
-   * language prefix in them IS the language - reading it here keeps the route
-   * statically renderable, where reading the request header would force every
-   * page dynamic and kill ISR.
-   */
-  path?: string[];
-  /** The page whose layout to render. Defaults to the site-wide header/footer. */
-  page?: string;
-}
-
-/**
- * The site-wide header and footer, rendered the way each mode needs them:
- *
- *  - published traffic: server-rendered layout blocks, no client cost;
- *  - the editor: the same blocks through the edit bridge, fetched with the
- *    preview secret, so what you see is the draft you are editing.
- *
- * Getting this wrong is invisible - the site looks right while the editor shows
- * a header it can select but not fill, or the published version of one.
- */
-export async function CmssyLayoutSlot({
-  position,
-  path,
-  page = "/",
-}: CmssyLayoutSlotProps) {
-  const [editMode, { defaultLocale, locales }] = await Promise.all([
-    isCmssyEditMode(),
-    fetchLocales(),
-  ]);
-
-  const [first] = path ?? [];
-  const locale =
-    first && first !== defaultLocale && locales.includes(first)
-      ? first
-      : defaultLocale;
-
-  const groups = await fetchLayouts(
-    page,
-    editMode ? cmssy.draftSecret : null,
-  );
-
-  if (!editMode) {
-    return (
-      <CmssyServerLayout
-        groups={groups}
-        blocks={blocks}
-        position={position}
-        locale={locale}
-        defaultLocale={defaultLocale}
-        enabledLocales={locales}
-        config={cmssy}
-      />
-    );
-  }
-
-  const origin = resolveEditorOrigin(cmssy.editorOrigin);
-  // The editor canvas renders stored content, and for a relation field that is
-  // raw ids - so the server-resolved content is handed over with it.
-  const editorData = await resolveEditorLayoutBlockData({
-    groups,
-    blocks,
-    position,
-    locale,
-    defaultLocale,
-    enabledLocales: locales,
-    isPreview: true,
-    config: cmssy,
-  });
-
-  return (
-    <EditableLayout
-      groups={groups}
-      position={position}
-      locale={locale}
-      defaultLocale={defaultLocale}
-      enabledLocales={locales}
-      edit={{ editorOrigin: Array.isArray(origin) ? origin[0] : origin }}
-      data={editorData.data}
-      resolvedContent={editorData.content}
-    />
-  );
-}