query more of the text fields in markdown and make figure component

eslint.config.mts

@@ -7,6 +7,13 @@ import { defineConfig } from "eslint/config";
 export default defineConfig([
     eslint.configs.recommended,
     tseslint.configs.recommended,
+    {
+        files: ["**/*.js"],
+        languageOptions: { globals: { ...globals.node } },
+        rules: {
+            "@typescript-eslint/no-require-imports": "off",
+        },
+    },
     {
         files: ["**/*.{ts,tsx}"],
         plugins: {
@@ -15,7 +22,7 @@ export default defineConfig([
         languageOptions: { globals: { ...globals.browser, ...globals.node } },
         rules: {
             "no-unused-vars": "off",
-            "@typescript-eslint/no-unused-vars": ["error"],
+            "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
             "sort-destructure-keys/sort-destructure-keys": [
                 2,
                 { caseSensitive: false },

gatsby-node.js

@@ -26,7 +26,7 @@ const DATA_ONLY_PAGES = [
     "resource",
 ];
 
-exports.createSchemaCustomization = ({ actions, schema }) => {
+exports.createSchemaCustomization = ({ actions }) => {
     const { createTypes } = actions;
     const typeDefs = [
         `"""
@@ -48,6 +48,18 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
             link: String
         }
 
+        type PreliminaryFindings {
+            summary: String!
+            figures: [ImgWithCaption!]!
+        }
+
+        type ImgWithCaption @dontInfer {
+            type: String!
+            url: String
+            file: File @fileByRelativePath
+            caption: String
+        }
+
         """
         Software tool reference with optional custom description.
         """
@@ -82,6 +94,9 @@ exports.createResolvers = ({ createResolvers }) => {
                         "No description provided.",
                     ),
             },
+            authors: {
+                resolve: (source) => resolveToArray(source.authors),
+            },
             title: {
                 resolve: (source) =>
                     stringWithDefault(source.title, "No title provided."),
@@ -112,6 +127,24 @@ exports.createResolvers = ({ createResolvers }) => {
                     return current;
                 },
             },
+            nextSteps: {
+                resolve: (source) => resolveToArray(source.nextSteps),
+            },
+            preliminaryFindings: {
+                resolve: (source) => {
+                    const raw = source.preliminaryFindings;
+                    if (!raw || typeof raw !== "object") {
+                        return {
+                            summary: "",
+                            figures: [],
+                        };
+                    }
+                    return {
+                        summary: stringWithDefault(raw.summary, ""),
+                        figures: resolveToArray(raw.figures),
+                    };
+                },
+            },
         },
     });
 };

gatsby/schema/base.gql

@@ -15,4 +15,9 @@ type Frontmatter {
     draft: Boolean
     tags: [String!]
     materialsAndMethods: MaterialsAndMethods!
+    authors: [String!]!
+    nextSteps: [String!]
+    publication: String
+    introduction: String
+    preliminaryFindings: PreliminaryFindings!
 }

package.json

@@ -33,6 +33,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
+        "react-markdown": "^10.1.0",
         "sass": "^1.43.2",
         "slugify": "^1.6.6",
         "uuid": "^8.0.0",
@@ -52,7 +53,7 @@
         "formatCheck": "prettier \"{src,gatsbyutils,netlify}/**/*.{ts,tsx,js,jsx}\" gatsby-*.js --check",
         "test": "vitest",
         "dev": "npx concurrently \"npx netlify-cms-proxy-server\" \"npm start -- --progress\"",
-        "lint": "eslint \"src/**/*.{ts,tsx}\" --quiet --fix"
+        "lint": "eslint \"src/**/*.{ts,tsx}\" gatsby-*.js --quiet --fix"
     },
     "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -77,4 +78,4 @@
     "engines": {
         "node": ">= 18.15.0"
     }
-}
+}

src/cms/cms.js

@@ -3,6 +3,7 @@ import CMS from "decap-cms-app";
 import AboutPagePreview from "./preview-templates/AboutPagePreview";
 import IdeaPostPreview from "./preview-templates/IdeaPostPreview";
 import IndexPagePreview from "./preview-templates/IndexPagePreview";
+import { UrlImageControl, UrlImagePreview } from "./widgets/UrlImageWidget";
 import VariableResourceUnionControl from "./widgets/VariableResourceWidget/VariableResourceUnionControl";
 import copyResourceNameHandler from "./widgets/VariableResourceWidget/copyResourceNameHandler";
 
@@ -13,6 +14,8 @@ CMS.registerWidget({
     controlComponent: VariableResourceUnionControl,
 });
 
+CMS.registerWidget("url-image", UrlImageControl, UrlImagePreview);
+
 CMS.registerPreviewTemplate("index", IndexPagePreview);
 CMS.registerPreviewTemplate("about", AboutPagePreview);
 CMS.registerPreviewTemplate("idea", IdeaPostPreview);

src/cms/widgets/UrlImageWidget.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+// Custom widget for URL-only image input with preview
+export const UrlImageControl = ({
+    value,
+    onChange,
+    forID,
+    classNameWrapper,
+}) => {
+    return React.createElement(
+        "div",
+        { className: classNameWrapper },
+        React.createElement("input", {
+            id: forID,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: "https://example.com/image.png",
+            style: { width: "100%" },
+        }),
+        value &&
+            React.createElement("img", {
+                src: value,
+                alt: "Preview",
+                style: {
+                    display: "block",
+                    marginTop: "12px",
+                    maxWidth: "100%",
+                    maxHeight: "200px",
+                },
+            }),
+    );
+};
+
+export const UrlImagePreview = ({ value }) =>
+    value ? React.createElement("img", { src: value, alt: "Preview" }) : null;

src/cms/widgets/VariableTypeWidget/VariableTypeWidgetControl.tsx

@@ -203,10 +203,9 @@ const VariableTypeWidgetControl = (props: VariableTypeWidgetControlProps) => {
          */
         const widget = CMS.getWidget("file");
 
-        const FileControl = widget?.control as
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            | React.ComponentType<any>
-            | undefined;
+        const FileControl =
+            widget?.control as // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                React.ComponentType<any> | undefined;
 
         if (!FileControl) {
             return (

src/components/CustomReactMarkdown.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+export const CustomReactMarkdown: React.FC<{ content: string }> = ({
+    content,
+}) => {
+    return (
+        <ReactMarkdown
+            components={{
+                p: ({ node: _node, ...props }) => (
+                    <p style={{ margin: 0 }} {...props} />
+                ),
+            }}
+        >
+            {content}
+        </ReactMarkdown>
+    );
+};

src/components/Figure.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+
+import { Card } from "antd";
+
+import { Figure } from "../types";
+
+interface FigureProps {
+    figure: Figure;
+}
+
+const { caption, container, image } = require("../style/figure.module.css");
+
+const FigureComponent: React.FC<FigureProps> = ({ figure }) => {
+    if (!figure.url && !figure.file) {
+        return null;
+    }
+
+    if (figure.url) {
+        return (
+            <Card className={container}>
+                <img
+                    className={image}
+                    src={figure.url}
+                    alt={figure.caption || "Figure"}
+                    style={{ marginBottom: "1rem" }}
+                />
+                <div className={caption}>{figure.caption}</div>
+            </Card>
+        );
+    }
+
+    const imageForGatsby = getImage(figure.file!.childImageSharp! ?? null);
+    if (!imageForGatsby) return null;
+    return (
+        <Card className={container}>
+            <GatsbyImage
+                image={imageForGatsby}
+                alt={figure.caption || `Preliminary finding figure`}
+                style={{
+                    marginBottom: "1rem",
+                }}
+            />
+            <div className={caption}>{figure.caption}</div>
+        </Card>
+    );
+};
+
+export default FigureComponent;

src/components/MaterialsAndMethods.tsx

@@ -4,6 +4,7 @@ import { Collapse } from "antd";
 import type { CollapseProps } from "antd";
 
 import { CellLine, MaterialsAndMethods, SoftwareTool } from "../types";
+import { CustomReactMarkdown } from "./CustomReactMarkdown";
 
 const { section, sectionTitle } = require("../style/idea-post.module.css");
 
@@ -50,10 +51,10 @@ export const MaterialsAndMethodsComponent: React.FC<MaterialsAndMethods> = ({
             <div key={index}>
                 {title}
                 {displayDescription && (
-                    <p>
+                    <div>
                         <strong>{`Description: `}</strong>
-                        {displayDescription}
-                    </p>
+                        <CustomReactMarkdown content={displayDescription} />
+                    </div>
                 )}
             </div>
         );
@@ -83,10 +84,12 @@ export const MaterialsAndMethodsComponent: React.FC<MaterialsAndMethods> = ({
                         )}
                     </p>
                     {datasetFm.description && (
-                        <p>
-                            <strong>Description:</strong>{" "}
-                            {datasetFm.description}
-                        </p>
+                        <div>
+                            <strong>Description:</strong>
+                            <CustomReactMarkdown
+                                content={datasetFm.description}
+                            />
+                        </div>
                     )}
                 </div>
             ),

src/pages/dataset/actin-compression-simulation-dataset.md

@@ -187,7 +187,9 @@ description: >
           ├── samples
           │   └── ACTIN_NO_COMPRESSION_(seed).csv
           └── viz
-              └── ACTIN_NO_COMPRESSION_(seed).simularium```
+              └── ACTIN_NO_COMPRESSION_(seed).simularium
+
+    ```
 
   - `analysis` = various analysis files
 

src/pages/ideas/2026-02-06-compare-actin-filament-compression-between-different-fiber-scale-simulators.md

@@ -22,7 +22,12 @@ preliminaryFindings:
     Cytosim) were not able to capture filament supertwist behavior observed with
     monomer-scale simulations (using ReaDDy).
   figures:
-    - https://www.micropublication.org/static/figures/micropub-biology-001347.png
+    - type: imageLink
+      url: https://www.micropublication.org/static/figures/micropub-biology-001347.png
+      caption: "an externally linked image"
+    - type: imageFile
+      file: /img/228469011.jpg
+      caption: An unrelated image from our website showing lots and lots of cells.
 materialsAndMethods:
   dataset: Actin compression simulation dataset
   software:

src/pages/ideas/dev-example.md

@@ -1,29 +1,29 @@
 ---
+preliminaryFindings:
+  summary: >
+    Preliminary segmentation and tracking suggest that junction "flickering"
+    (rapid local changes in junction length and intensity) increases ~30–60
+    minutes before migration onset in a subset of fields of view. Here is a link for no reason: [link](https://allencell.org/).
+  figures:
+    - type: imageFile
+      file: /img/228469011.jpg
+      caption: An unrelated image from our website showing lots and lots of cells.
+    - type: imageFile
+      file: /img/228469011.jpg
+draft: false
 templateKey: idea-post
-title: Placeholder name (dev example)
+title: Investigate role of cell-cell junctions in collective cell migration (dev
+  example)
 type: analysis of existing data
 date: 2025-10-28T19:10:00.000Z
-draft: false
-
 authors:
   - Gokhan Dalgin
-  - Jane Doe
-
+  - Caroline Hookway
 program: EMT
-
 introduction: >
   Collective cell migration during EMT appears to be preceded by subtle
-  remodeling of cell-cell junctions. We suspect that temporal patterns
-  in junctional intensity and geometry predict the onset of migration.
-
-preliminaryFindings:
-  summary: >
-    Preliminary segmentation and tracking suggest that junction "flickering"
-    (rapid local changes in junction length and intensity) increases
-    ~30–60 minutes before migration onset in a subset of fields of view.
-  figures:
-    - figure: /img/228469011.jpg
-
+  remodeling of cell-cell junctions. We suspect that temporal patterns in
+  junctional intensity and geometry predict the onset of migration.
 materialsAndMethods:
   dataset: Released EMT dataset
   protocols:
@@ -39,22 +39,18 @@ materialsAndMethods:
       customDescription: Custom description in the markdown file for the idea, not in the software file markdown.
     - softwareTool: Timelapse Feature Explorer
 nextSteps:
-  - "Expand analysis to all EMT datasets and stratify by treatment."
-  - "Quantify robustness of the junction \"flicker\" signature across cell lines."
-  - "Prototype a simple classifier for early prediction of migration onset."
-  - "Share intermediate results with the EMT program for feedback."
-
+  - "Expand analysis to all EMT datasets and stratify by treatment. And a link for no reason: [link](https://allencell.org/)"
+  - Quantify robustness of the junction "flicker" signature across cell lines.
+  - Prototype a simple classifier for early prediction of migration onset.
+  - Share intermediate results with the EMT program for feedback.
 publication: Dalgin et al., _In preparation_
-
 tags:
   - DEV Example
   - EMT
   - migration
   - cell-cell junctions
-
 acknowledgment: as co-authors
-
 concerns: >
   Potential overlap with planned EMT program manuscripts; need to confirm
   publication strategy with program leads before extensive external sharing.
----
+---