Enabled Live Preview

CodeForAfrica · Aug 8, 2024 · 39c335d · 39c335d
1 parent 9f76f9b
commit 39c335d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 246 deletions.
diff --git a/apps/civicsignalblog/package.json b/apps/civicsignalblog/package.json
@@ -47,6 +47,7 @@
     "@next/env": "^14.2.5",
     "@payloadcms/bundler-webpack": "^1.0.7",
     "@payloadcms/db-mongodb": "^1.7.1",
+    "@payloadcms/live-preview-react": "^0.2.0",
     "@payloadcms/plugin-cloud-storage": "^1.1.3",
     "@payloadcms/plugin-nested-docs": "^1.0.12",
     "@payloadcms/plugin-sentry": "^0.0.6",

diff --git a/apps/civicsignalblog/src/lib/data/utils/posts.js b/apps/civicsignalblog/src/lib/data/utils/posts.js
@@ -116,17 +116,18 @@ export async function getPost(api, slug, primaryTag) {
   const postMeta = {
     title,
     description: excerpt,
-    image: coverImage,
+    image: coverImage ?? null,
     ...meta,
   };
   const blocks = [
     {
-      authors: authors.map(({ fullName, bio }) => {
-        return {
-          name: fullName,
-          bio,
-        };
-      }),
+      authors:
+        authors?.map(({ fullName, bio }) => {
+          return {
+            name: fullName,
+            bio,
+          };
+        }) ?? null,
       title,
       coverImage,
       excerpt,

diff --git a/apps/civicsignalblog/src/pages/[...slugs].page.js b/apps/civicsignalblog/src/pages/[...slugs].page.js
@@ -1,3 +1,4 @@
+import { useLivePreview } from "@payloadcms/live-preview-react";
 import React from "react";
 import { SWRConfig } from "swr";
 
@@ -18,7 +19,13 @@ const componentsBySlugs = {
   stories: Articles,
 };
 
-function Index({ blocks, fallback }) {
+function Index(initialData) {
+  const { data: props } = useLivePreview({
+    serverURL: process.env.NEXT_PUBLIC_APP_URL || "",
+    depth: 2,
+    initialData,
+  });
+  const { blocks, fallback } = props;
   if (!blocks?.length) {
     return null;
   }

diff --git a/apps/civicsignalblog/src/payload/collections/Pages.js b/apps/civicsignalblog/src/payload/collections/Pages.js
@@ -20,6 +20,10 @@ const Pages = {
     group: "Publication",
     preview: (doc, options) => formatDraftUrl("pages", doc, options),
     useAsTitle: "title",
+    livePreview: {
+      url: ({ data }) =>
+        `${process.env.PAYLOAD_PUBLIC_APP_URL}/${data.slug !== "index" ? `${data.slug}` : ""}`,
+    },
   },
   fields: [
     {

diff --git a/apps/civicsignalblog/src/payload/collections/Posts.js b/apps/civicsignalblog/src/payload/collections/Posts.js
@@ -24,6 +24,11 @@ const Posts = {
     group: "Publication",
     useAsTitle: "title",
     listSearchableFields: ["content", "excerpt"],
+    livePreview: {
+      // Assumed that all posts appear under pots/stories
+      url: ({ data }) =>
+        `${process.env.PAYLOAD_PUBLIC_APP_URL}/posts/stories/${data.slug}`,
+    },
   },
   fields: [
     {