Idea preview

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,77 @@
+import React from "react";
+
+import { IdeaPostTemplate } from "../../templates/idea-post";
+import { IdeaPostNode } from "../../types";
+import { ImmutableLike, fromImmutable } from "../utils/immutable";
+
+interface PreviewProps {
+    entry?: ImmutableLike;
+}
+
+const previewBannerStyle: React.CSSProperties = {
+    padding: "8px 12px",
+    marginBottom: "12px",
+    backgroundColor: "#fff8e1",
+    border: "1px solid #ffe082",
+    borderRadius: "4px",
+    fontSize: "16px",
+    color: "#6d4c00",
+};
+
+const placeholderStyle: React.CSSProperties = {
+    border: "1.5px dashed #ffe082",
+    borderRadius: "4px",
+    padding: "16px 20px",
+    backgroundColor: "#fffdf5",
+    color: "#6d4c00",
+    fontSize: "14px",
+    lineHeight: 1.6,
+};
+
+const ResourcePlaceholder: React.FC = () => (
+    <div className="idea-post-section">
+        <div style={placeholderStyle}>
+            <p style={{ margin: 0 }}>
+                Resource details are loaded from related entries at build time
+                and cannot be previewed here. The published page will display
+                full resource cards with descriptions and links.
+            </p>
+        </div>
+    </div>
+);
+
+const IdeaPostPreview: React.FC<PreviewProps> = ({ entry }) => {
+    const raw = entry?.get("data");
+    const data = fromImmutable<IdeaPostNode>(raw) ?? ({} as IdeaPostNode);
+
+    return (
+        <div>
+            <div style={previewBannerStyle}>
+                Preview approximation — because of the way this site it built,
+                it's hard to preview the entire context of the way the idea will
+                sit in the layout, and we can't access relational data (like the
+                relevant resources). So this preview is an overal look of the
+                initial proposal, title, etc.
+            </div>
+            <IdeaPostTemplate
+                title={data.title}
+                authors={data.authors ?? []}
+                introduction={data.introduction}
+                tags={[]}
+                nextSteps={data.nextSteps}
+                publication={data.publication}
+                preliminaryFindings={data.preliminaryFindings}
+                slug={data.slug ?? ""}
+                date={data.date ?? null}
+                description={data.description ?? null}
+                resources={[]}
+                relatedIdeas={[]}
+            />
+            <div className="idea-post">
+                <ResourcePlaceholder />
+            </div>
+        </div>
+    );
+};
+
+export default IdeaPostPreview;

src/components/ExpandableDescriptionView.tsx

@@ -3,15 +3,9 @@ import React from "react";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 
+import "../style/idea-post.css";
 import { CustomReactMarkdown } from "./CustomReactMarkdown";
 
-const {
-    backBar,
-    container,
-    mainTitle,
-    sectionText,
-} = require("../style/idea-post.module.css");
-
 interface ExpandedDescriptionViewProps {
     content: string;
     label: string;
@@ -27,14 +21,17 @@ interface ExpandedDescriptionViewProps {
 export const ExpandedDescriptionView: React.FC<
     ExpandedDescriptionViewProps
 > = ({ content, label, onBack }) => (
-    <div className={container}>
-        <div className={backBar}>
+    <div className="idea-post">
+        <div className="idea-post-back-bar">
             <Button icon={<ArrowLeftOutlined />} onClick={onBack}>
                 Back to idea
             </Button>
         </div>
-        <h3 className={mainTitle}>{label}</h3>
-        <CustomReactMarkdown className={sectionText} content={content} />
+        <h3 className="idea-post-main-title">{label}</h3>
+        <CustomReactMarkdown
+            className="idea-post-section-text"
+            content={content}
+        />
     </div>
 );
 

src/components/ExpandableText.tsx

@@ -3,11 +3,10 @@ import React from "react";
 import { Button } from "antd";
 
 import { MAX_RESOURCE_DESCRIPTION_LENGTH } from "../constants";
+import "../style/idea-post.css";
 import { truncateAtWord } from "../utils/utils";
 import { CustomReactMarkdown } from "./CustomReactMarkdown";
 
-const { sectionText } = require("../style/idea-post.module.css");
-
 interface ExpandableTextProps {
     fullText?: string | null;
     onExpand?: () => void;
@@ -30,7 +29,10 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
     // shortText only — show as-is
     if (shortText && !fullText) {
         return (
-            <CustomReactMarkdown className={sectionText} content={shortText} />
+            <CustomReactMarkdown
+                className={"idea-post-section-text"}
+                content={shortText}
+            />
         );
     }
 
@@ -41,7 +43,7 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
         return (
             <>
                 <CustomReactMarkdown
-                    className={sectionText}
+                    className={"idea-post-section-text"}
                     content={
                         needsTruncation
                             ? truncateAtWord(
@@ -63,7 +65,10 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
     // Both — show shortText, "See more" opens full-page view
     return (
         <>
-            <CustomReactMarkdown className={sectionText} content={shortText!} />
+            <CustomReactMarkdown
+                className={"idea-post-section-text"}
+                content={shortText!}
+            />
             {fullText && onExpand && (
                 <Button type="link" onClick={onExpand}>
                     See more

src/components/MaterialsAndMethods.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
 import { RESOURCE_TYPES } from "../constants/resourceTypes";
+import "../style/idea-post.css";
 import { ResourceNode } from "../types";
 import ResourceItem from "./ResourceItem";
 
-const { section, sectionTitle } = require("../style/idea-post.module.css");
-
 interface MaterialsAndMethodsProps {
     resources: ResourceNode[];
     onExpandDescription?: (
@@ -48,8 +47,8 @@ export const MaterialsAndMethodsComponent: React.FC<
     return (
         <>
             {datasets.length > 0 && (
-                <div id="datasets" className={section}>
-                    <h4 className={sectionTitle}>Datasets</h4>
+                <div id="datasets" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Datasets</h4>
                     {datasets.map((dataset, index) => (
                         <ResourceItem
                             key={index}
@@ -73,8 +72,8 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {cellLines.length > 0 && (
-                <div id="cell-lines" className={section}>
-                    <h4 className={sectionTitle}>Cell Lines</h4>
+                <div id="cell-lines" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Cell Lines</h4>
                     {cellLines.map((item, index) => (
                         <ResourceItem
                             key={index}
@@ -86,8 +85,8 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {protocols.length > 0 && (
-                <div id="protocols" className={section}>
-                    <h4 className={sectionTitle}>Protocols</h4>
+                <div id="protocols" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Protocols</h4>
                     {protocols.map((item, index) => (
                         <ResourceItem
                             key={index}
@@ -99,8 +98,10 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {softwareTools.length > 0 && (
-                <div id="software-tools" className={section}>
-                    <h4 className={sectionTitle}>Software Tools</h4>
+                <div id="software-tools" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>
+                        Software Tools
+                    </h4>
                     {softwareTools.map((tool, index) => (
                         <ResourceItem
                             key={index}

src/style/idea-post.module.css → src/style/idea-post.css

@@ -1,104 +1,101 @@
-/* Offset anchor scroll targets so the sticky header doesn't cover them */
-:global([id]) {
-    scroll-margin-top: 80px;
-}
-
-.container {
+.idea-post {
+    font-family: "Raleway", sans-serif;
     border: none;
     border-radius: 0px;
     padding: 12px 24px 12px 48px;
-    background-color: var(--white);
+    background-color: var(--WHITE);
     line-height: 1.7;
+
     a {
         overflow-wrap: break-word;
     }
-    .section {
+
+    [id] {
+        scroll-margin-top: 80px;
+    }
+
+    .idea-post-section {
         margin-top: 1rem;
         margin-bottom: 1rem;
     }
-    .mainTitle {
+
+    .idea-post-main-title {
         font-size: 2rem;
         color: var(--primary-color);
         line-height: 1.5;
+
         @media screen and (max-width: 576px) {
             font-size: 1.5rem;
             line-height: 1;
         }
     }
-    .authorsClass {
+
+    .idea-post-authors {
         margin-top: 0px;
         margin-bottom: 0px;
         font-size: 1rem;
         font-weight: 500;
         color: rgb(from var(--primary-color) r g b / 0.9);
+
         @media screen and (max-width: 576px) {
-            margin-top: .5rem;
+            margin-top: 0.5rem;
         }
     }
-    h4.sectionTitle {
+
+    h4.idea-post-section-title {
         margin-bottom: 0.5rem;
         margin-top: 1rem;
     }
-    h3.sectionTitle {
+
+    h3.idea-post-section-title {
         font-size: 1.7rem;
         font-weight: 600;
         margin-top: 1.5rem;
         margin-bottom: 1.75rem;
     }
 
-    .actionIcons {
-        font-size: 16px;
-    }
-
-    .taglist {
+    .idea-post-taglist {
         list-style: none;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
-    }
 
-    .taglist li {
-        display: inline-block;
+        li {
+            display: inline-block;
+        }
     }
 
-    .proposalTitle {
+    .idea-post-proposal-title {
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         margin-top: 0.5rem;
     }
 
-    .proposal {
+    .idea-post-proposal {
         font-size: 16px;
         font-weight: 500;
         border: 1px solid #cbcbcc;
         background-color: rgb(240, 251, 255);
         border-radius: 4px;
         padding: 12px;
         line-height: 1.5;
+
         ul {
             padding-inline-start: 20px;
         }
     }
 
-    .sectionBorder {
-        border: 1px solid #cbcbcc;
-        border-radius: 4px;
-        padding: 12px;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    .sectionText {
+    .idea-post-section-text {
         font-size: 16px;
         font-weight: 500;
         line-height: 1.5;
-               margin-top: 1rem;
+        margin-top: 1rem;
         margin-bottom: 1rem;
     }
 
-    .backBar {
+    .idea-post-back-bar {
         position: sticky;
         top: 64px;
         z-index: 10;