Merge pull request #832 from CodeForAfrica/feat/live-preview-civicsignal

Enabled Live Preview

apps/civicsignalblog/contrib/dokku/Dockerfile

@@ -1 +1 @@
-FROM codeforafrica/codeforafrica-ui:0.1.5
+FROM codeforafrica/codeforafrica-ui:0.1.6

apps/civicsignalblog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "civicsignalblog",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the (temporary) CivicSignal blog",
@@ -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",

apps/civicsignalblog/src/lib/data/seo.js

@@ -39,7 +39,7 @@ export default function getPageSeoFromMeta(page, settings) {
     type: "website",
     site_name: siteTitle,
   };
-  if (image.url) {
+  if (image?.url) {
     const { alt, height, mimeType: type, url, width } = image;
     openGraph.images = [
       {

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,

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;
   }

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: [
     {

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: [
     {