rankrunners-cms 0.0.10 → 0.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rankrunners-cms",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "peerDependencies": {
     "@puckeditor/core": "^0.21.0",
     "next": "^16.1.2",

package/src/editor/index.tsx

@@ -15,6 +15,7 @@ import type { CategoriesType, CMSUserConfig, ComponentsType } from "./types";
 import type { RootConfig } from "@puckeditor/core";
 
 export * from "./types";
+export * from "./render";
 
 export const defaultCategories: CategoriesType<
   ["layout", "typography", "interactive", "other"]

package/src/editor/render/PageRendererContent.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import type { CMSUserData } from "../types";
+import { Render, type Config } from "@puckeditor/core";
+import { CMS_BASE_URL, SITE_ID } from "../../api";
+import { fetchWithCache } from "../../libs";
+
+const getPageContents = async (
+  pathname: string,
+  allPageData: Record<string, CMSUserData<any>>
+) => {
+  // remove trailing (left and right) slashes
+  pathname = pathname.replace(/^\/+|\/+$/g, "");
+
+  try {
+    const res = await fetchWithCache(
+      `${CMS_BASE_URL}/public/seo/${SITE_ID}/pages/${pathname}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (res.ok) {
+      //  console.error("Failed to fetch page data from CMS");
+      //  throw new Error("Failed to fetch page data from CMS");
+      //}
+      const json = (await res.json()) as { content?: string };
+
+      if (json.content) {
+        const content = JSON.parse(json.content) as CMSUserData<any>;
+
+        if (content.root && content.content) {
+          return content;
+        }
+      }
+    }
+
+    const actualData = allPageData[pathname as keyof typeof allPageData];
+
+    if (actualData) {
+      // Starting new page from existing published data
+      return actualData as CMSUserData<any>;
+    }
+
+    // Starting new blank page
+  } catch (error) {
+    console.error("Error fetching page data:", error);
+  }
+
+  return {
+    content: [],
+    root: { props: { title: "New Page" } },
+    zones: {},
+  };
+};
+
+export type PageRendererContentProps = {
+  pathname: string;
+  config: Config;
+  allPageData: Record<string, CMSUserData<any>>;
+};
+
+export const PageRendererContent = ({
+  config,
+  pathname,
+  allPageData,
+}: PageRendererContentProps) => {
+  const [data, setData] = useState<CMSUserData<any> | null>(null);
+
+  useState(() => {
+    const fetchData = async () => {
+      const pageData = await getPageContents(pathname, allPageData);
+      setData(pageData);
+    };
+    fetchData();
+  });
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p>Loading page...</p>
+      </div>
+    );
+  }
+
+  return <Render config={config} data={data} />;
+};

package/src/editor/render/index.ts

@@ -0,0 +1,2 @@
+export * from "./Preview";
+export * from "./PageRendererContent";

package/src/next/editor/Editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BaseEditor } from "../../editor/preview/Preview";
+import { BaseEditor } from "../../editor/render/Preview";
 import { usePathnameNext, useSearchParamsNext } from "../hooks";
 
 export const EditorNext = BaseEditor({

package/src/next/editor/PageRenderer.tsx

@@ -0,0 +1,30 @@
+import type { Config } from "@puckeditor/core";
+import { usePathnameNext, useSearchParamsNext } from "../hooks";
+import type { CMSUserData } from "../../editor/types";
+import { EditorNext } from "./Editor";
+import { PageRendererContent } from "../../editor/render";
+
+export type PageRendererNextInitializerProps = {
+  config: Config;
+  allPageData: Record<string, CMSUserData<any>>;
+};
+
+export const PageRendererNext =
+  ({ config, allPageData }: PageRendererNextInitializerProps) =>
+  () => {
+    const pathname = usePathnameNext();
+    const searchParams = useSearchParamsNext();
+    const previewToken = searchParams.get("preview");
+
+    if (previewToken) {
+      return <EditorNext config={config} allPageData={allPageData} />;
+    }
+
+    return (
+      <PageRendererContent
+        config={config}
+        allPageData={allPageData}
+        pathname={pathname}
+      />
+    );
+  };

package/src/next/editor/index.ts

@@ -1 +1,2 @@
 export * from "./Editor";
+export * from "./PageRenderer";

package/src/tanstack/editor/Editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BaseEditor } from "../../editor/preview/Preview";
+import { BaseEditor } from "../../editor/render/Preview";
 import { usePathnameTanstack, useSearchParamsTanstack } from "../hooks";
 
 export const EditorTanstack = BaseEditor({