Preview Ideas in CMS (pt. 1/2)

src/cms/cms.js

@@ -20,7 +20,7 @@ CMS.registerWidget("url-image", UrlImageControl, UrlImagePreview);
 
 CMS.registerPreviewTemplate("index", IndexPagePreview);
 CMS.registerPreviewTemplate("about", AboutPagePreview);
-CMS.registerPreviewTemplate("idea", IdeaPostPreview);
+CMS.registerPreviewTemplate("ideas", IdeaPostPreview);
 
 // Decap exposes a number of lifecycle stages we can hook into and register.
 CMS.registerEventListener({

src/cms/preview-templates/IdeaPostPreview.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import {
+    IdeaPostTemplate,
+    IdeaPostTemplateProps,
+} from "../../templates/idea-post";
+import { ImmutableLike, fromImmutable } from "../utils/immutable";
+
+interface PreviewProps {
+    entry?: ImmutableLike;
+    value?: unknown;
+}
+
+/**
+ * Normalize CMS form data into the shape IdeaPostTemplate expects.
+ * Decap gives us raw widget values which differ from resolved Gatsby data:
+ *   - relation widgets return value_field strings, not resolved objects
+ *   - single select widgets return a string, not an array
+ */
+function normalizeCmsData(
+    raw: Record<string, unknown>,
+): Partial<IdeaPostTemplateProps> {
+    const v = raw as Partial<IdeaPostTemplateProps>;
+
+    // program: single select string → array
+    const program = v.program;
+    const normalizedProgram = program
+        ? Array.isArray(program)
+            ? program
+            : [String(program)]
+        : undefined;
+
+    // authors: relation gives ["name1", "name2"] → [{ name, contactId }]
+    const authors = v.authors
+        ? (v.authors as unknown as string[]).map((a) =>
+              typeof a === "string" ? { name: a, contactId: "" } : a,
+          )
+        : undefined;
+
+    // date: datetime widget returns a Date/object, template expects a string
+    const rawDate = raw.date;
+    const date = rawDate
+        ? typeof rawDate === "string"
+            ? rawDate
+            : new Date(rawDate as string | number).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "2-digit",
+              })
+        : undefined;
+
+    return {
+        ...v,
+        authors,
+        date,
+        isPreview: true,
+        program: normalizedProgram,
+    };
+}
+
+const IdeaPostPreview: React.FC<PreviewProps> = ({ entry, value }) => {
+    const raw = value ?? (entry?.get("data") as ImmutableLike | undefined);
+    const v = fromImmutable<Record<string, unknown>>(raw) ?? {};
+    return (
+        <>
+            <div
+                style={{
+                    background: "#fffbe6",
+                    border: "1px solid #ffe58f",
+                    borderRadius: 4,
+                    color: "#874d00",
+                    fontSize: 12,
+                    margin: 8,
+                    padding: "6px 12px",
+                }}
+            >
+                Previews are approximate/under development — content and styling
+                may differ from production, and not all functionality will be
+                available.
+            </div>
+            <IdeaPostTemplate
+                {...(normalizeCmsData(v) as IdeaPostTemplateProps)}
+            />
+        </>
+    );
+};
+
+export default IdeaPostPreview;

src/templates/idea-post.tsx

@@ -41,18 +41,20 @@ const {
     tagRowLabel,
 } = require("../style/idea-post.module.css");
 
-export const IdeaPostTemplate: React.FC<
-    IdeaPostNode & {
-        onExpandDescription?: (
-            content: string,
-            label: string,
-            sectionKey: string,
-        ) => void;
-    }
-> = ({
+export type IdeaPostTemplateProps = IdeaPostNode & {
+    isPreview?: boolean;
+    onExpandDescription?: (
+        content: string,
+        label: string,
+        sectionKey: string,
+    ) => void;
+};
+
+export const IdeaPostTemplate: React.FC<IdeaPostTemplateProps> = ({
     authors,
     date,
     introduction,
+    isPreview,
     nextSteps,
     onExpandDescription,
     preliminaryFindings,
@@ -121,27 +123,34 @@ export const IdeaPostTemplate: React.FC<
                     </Button>
                 </div>
             </div>
-
-            <ContactModal
-                authors={authors}
-                primaryContact={primaryContact}
-                title={title}
-                open={contactModalOpen}
-                onClose={() => setContactModalOpen(false)}
-            />
+            {!isPreview && (
+                <ContactModal
+                    authors={authors}
+                    primaryContact={primaryContact}
+                    title={title}
+                    open={contactModalOpen}
+                    onClose={() => setContactModalOpen(false)}
+                />
+            )}
 
             {/* Tag row */}
             {tags && tags.length > 0 && (
                 <div className={tagRow}>
                     <span className={tagRowLabel}>Topics</span>
-                    {tags.map((t) => (
-                        <TagPopover
-                            key={t}
-                            tag={t}
-                            currentSlug={slug}
-                            className={tag}
-                        />
-                    ))}
+                    {tags.map((t) =>
+                        isPreview ? (
+                            <span key={t} className={tag}>
+                                {t}
+                            </span>
+                        ) : (
+                            <TagPopover
+                                key={t}
+                                tag={t}
+                                currentSlug={slug}
+                                className={tag}
+                            />
+                        ),
+                    )}
                 </div>
             )}
 
@@ -214,8 +223,16 @@ export const IdeaPostTemplate: React.FC<
                             {relatedIdeas!.map((idea) => {
                                 if (!idea.slug && !idea.title) return null;
                                 return (
-                                    <li key={idea.slug}>
-                                        <Link to={idea.slug}>{idea.title}</Link>
+                                    <li key={idea.slug || idea.title}>
+                                        {/* Gatsby's Link needs the app runtime
+                                            the Decap preview iframe lacks */}
+                                        {isPreview ? (
+                                            <a href={idea.slug}>{idea.title}</a>
+                                        ) : (
+                                            <Link to={idea.slug}>
+                                                {idea.title}
+                                            </Link>
+                                        )}
                                     </li>
                                 );
                             })}