query more of the text fields in markdown and make figure component by interim17 · Pull Request #37 · AllenCell/idea-board

interim17 · 2026-02-06T03:16:59Z

Update:
In response to @jessicasyu nicely stress testing the figures data entry, I pushed up a few changes

variable type imageLink and imageFile for figures
custom widget url-image for imageLink
- this gets us a string entry with a preview and removes the button to add a local file
-slightly overkill? but fun to add a custom widget and this seemed like a pain: https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

Problem

Advances #7

querying the various fields in the markdown that we weren't rendering yet: preliminary findings, next steps, authors, publication
build a very basic component as a container for figures, can expand on this later

Not a polished design, but it's easier to picture the final result if add better placeholders, and actually query and render the data. Then we can design around something more reasonable.

ing-system.url/ticket-number)

netlify · 2026-02-06T03:17:05Z

✅ Deploy Preview for project-idea-board ready!

Name	Link
🔨 Latest commit	`397a360`
🔍 Latest deploy log	https://app.netlify.com/projects/project-idea-board/deploys/698a7c37631df500089652c6
😎 Deploy Preview	https://deploy-preview-37--project-idea-board.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR enhances the idea post template by querying and rendering additional markdown frontmatter fields that were previously not displayed, including authors, publication info, preliminary findings with figures, and next steps. A new Figure component was created to display images with captions.

Changes:

Added type definitions for PreliminaryFindings and Figure to support the new data structures
Created a FigureComponent to render images with captions in a styled card container
Updated the idea post template to display authors, publication, preliminary findings with figures, and next steps as a formatted list

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/types/index.ts	Added type exports for PreliminaryFindings and Figure
src/templates/idea-post.tsx	Integrated new fields into template, added Figure rendering, and updated GraphQL query
src/style/figure.module.css	Added styling for figure container and captions with responsive design
src/pages/ideas/dev-example.md	Reformatted markdown structure and updated example content
src/components/Figure.tsx	Created new component to render figures with GatsbyImage and captions
gatsby-node.js	Added schema definitions and resolvers for new frontmatter fields

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/types/index.ts

+export type IdeasForTags = Queries.AllIdeasForTagsQuery["allMarkdownRemark"]["edges"];
+
+export type PreliminaryFindings = NonNullable<IdeaFrontmatter["preliminaryFindings"]>;
+export type Figure = NonNullable<IdeaFrontmatter["preliminaryFindings"]>["figures"][number]


src/components/Figure.tsx

gatsby-node.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…eature/more-queries

…stom url widget

…eature/more-queries

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/templates/idea-post.tsx

 import React from "react";
 import { Helmet } from "react-helmet-async";
 import { graphql, Link, PageProps } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";


src/templates/idea-post.tsx

+                        {hasFigures &&
+                            preliminaryFindings.figures.map((figure) => {
+                                return (
+                                    <FigureComponent
+                                        figure={figure}
+                                    />
+                                );
+                            })}


src/templates/idea-post.tsx

                {nextSteps && (
                    <div className={section}>
-                        <h2 className={sectionTitle}>Suggested next steps:</h2>
-                        {nextSteps}
+                        <h4 className={sectionTitle}>Suggested next steps:</h4>
+                        <ul>
+                            {nextSteps.map((step: string, index: number) => (
+                                <li key={index}>{step}</li>
+                            ))}
+                        </ul>
                    </div>
                )}


interim17 · 2026-02-09T23:24:59Z

gatsby-node.js

+            preliminaryFindings: {
+                resolve: (source) => {
+                    const raw = source.preliminaryFindings;
+                    if (!raw || typeof raw !== "object") {
+                        return {
+                            summary: "",
+                            figures: [],
+                        };
+                    }
+                    return {
+                        summary: stringWithDefault(raw.summary, ""),
+                        figures: resolveToArray(raw.figures),
+                    };
+                },
+            },


Handled this slightly differently

gatsby-node.js

+        type ImgWithCaption @dontInfer {
+            type: String!
+            url: String
+            file: File @fileByRelativePath
+            caption: String
+        }


src/templates/idea-post.tsx

+                        caption
+                    }
+                }
+                publication


src/components/Figure.tsx

…dea-board into feature/more-queries

interim17 · 2026-02-09T23:32:29Z

static/admin/config.yml

+                            types:
+                                [
+                                    {
+                                        label: "Image link",
+                                        name: "imageLink",
+                                        widget: "object",
+                                        fields: [
+                                                {
+                                                    label: "Figure URL",
+                                                    name: "url",
+                                                    widget: "url-image",
+                                                    hint: "Enter a valid image URL to see a preview",
+                                                },
+                                                {
+                                                    label: "Caption",
+                                                    name: "caption",
+                                                    widget: "string",
+                                                    required: false,
+                                                },
+                                            ],
+                                    },
+                                    {
+                                        label: "Image file",
+                                        name: "imageFile",
+                                        widget: "object",
+                                        fields: [
+                                                {
+                                                    label: "Figure",
+                                                    name: "file",
+                                                    widget: "image",
+                                                    choose_url: false,
+                                                },
+                                                {
+                                                    label: "Caption",
+                                                    name: "caption",
+                                                    widget: "string",
+                                                    required: false,
+                                                },
+                                            ],
+                                    },
+                                ],


The default image widget is nice in the admin page, but a bit of pain when it comes time to query and use a remote URL for an image (like the one Jess added). This sets us up to use our custom url-image widget and preview.

interim17 · 2026-02-09T23:34:09Z

src/cms/widgets/UrlImageWidget.js

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


Custom widget and preview for the CMS.

Essentially all this is is a "string" widget and a preview so that we can get the functionality of an "image" widget without the button that gives the option to load in a local file.

That way when we query by type we know easily which one we are dealing with. The suggested workaround from gatsby seemed like a pain, especially given that we are not storing figures directly on a markdown node:
https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

…eature/more-queries

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

d7d2e3b

interim17 requested a review from Copilot February 6, 2026 03:17

Copilot AI reviewed Feb 6, 2026

View reviewed changes

interim17 and others added 7 commits February 5, 2026 19:23

Update gatsby-node.js

3020193

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

remove key and index from figure component

4f4bcf2

add resolver for next steps

d3f201e

tighten up preliminaryFindings resolver

85faacf

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

d733efa

…eature/more-queries

fix remote url issues in figures with variable types component and cu…

15ccd2a

…stom url widget

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

e6d8928

…eature/more-queries

interim17 requested a review from Copilot February 9, 2026 23:15

Copilot AI reviewed Feb 9, 2026

View reviewed changes

interim17 added 4 commits February 9, 2026 15:18

use caption as alt in GatsbyImage

3705b6f

more robust check for preliminary findings

bd20be7

more robust check for preliminary findings

ad0b157

Merge branch 'feature/more-queries' of https://github.com/AllenCell/i…

fbe727f

…dea-board into feature/more-queries

interim17 commented Feb 9, 2026

View reviewed changes

restore title field

18ca6a5

interim17 requested review from jessicasyu and meganrm February 10, 2026 00:06

interim17 added 2 commits February 9, 2026 16:17

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

dae1df4

…eature/more-queries

scale image inside container

397a360

Conversation

interim17 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Uh oh!

netlify bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for project-idea-board ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

interim17 commented Feb 6, 2026 •

edited

Loading

netlify bot commented Feb 6, 2026 •

edited

Loading