@cmssy/cli 10.9.2 → 10.10.0

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

@@ -1,8 +1,8 @@
-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";
 
 type PageProps = {
   params: Promise<{ path?: string[] }>;
@@ -11,19 +11,29 @@ type PageProps = {
 
 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}
+      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,8 @@
-import { createCmssyEditPage } from "@cmssy/next/server";
+import { createCmssyEditPage, 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";
 
 // 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 +24,23 @@ 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;
+  const slot = (position: "header" | "footer") => (
+    <CmssyLayoutSlot
+      config={cmssy}
+      blocks={blocks}
+      position={position}
+      path={path}
+      editable={EditableLayout}
+    />
+  );
+
   return (
     <>
-      <CmssyLayoutSlot position="header" path={path} />
+      {slot("header")}
       <main>
         <CmssyEditPage {...props} />
       </main>
-      <CmssyLayoutSlot position="footer" path={path} />
+      {slot("footer")}
     </>
   );
 }

package/dist/index.js

@@ -168,7 +168,6 @@ var FRAMEWORKS = [
       "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": "10.10.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": "10.10.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}
-    />
-  );
-}