From 3489322eadb996cf9d13281e66ec61a1cb61c7eb Mon Sep 17 00:00:00 2001 From: meganrm Date: Mon, 1 Jun 2026 22:19:08 -0700 Subject: [PATCH 1/6] style: add flex layout and thumbnail class to idea roll --- src/style/idea-roll.module.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/style/idea-roll.module.css b/src/style/idea-roll.module.css index 5919b1e..99f4502 100644 --- a/src/style/idea-roll.module.css +++ b/src/style/idea-roll.module.css @@ -8,12 +8,20 @@ .listItem { padding: 22px 0; border-bottom: 1px solid var(--border-color); + display: flex; + align-items: flex-start; + gap: 14px; } .listItem:last-child { border-bottom: none; } +.textBlock { + flex: 1; + min-width: 0; +} + .tagEyebrow { display: flex; align-items: center; @@ -64,3 +72,13 @@ font-weight: 400; color: var(--text-secondary-color); } + +.thumbnail { + width: 80px; + height: 64px; + object-fit: cover; + border-radius: 3px; + flex-shrink: 0; + display: block; + overflow: hidden; +} From 501488e9a354fbbf6c8587e9905e5c6632baf33d Mon Sep 17 00:00:00 2001 From: meganrm Date: Mon, 1 Jun 2026 23:02:37 -0700 Subject: [PATCH 2/6] feat: show image thumbnail in idea list when figure is available Co-Authored-By: Claude Sonnet 4.6 --- src/components/IdeaRoll.tsx | 120 ++++++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 33 deletions(-) diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx index 89fb3d3..2828f00 100644 --- a/src/components/IdeaRoll.tsx +++ b/src/components/IdeaRoll.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Link, graphql, useStaticQuery } from "gatsby"; +import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { TagPopover } from "./TagPopover"; @@ -11,6 +12,8 @@ const { listItem, tagEyebrow, tagSeparator, + textBlock, + thumbnail, title, } = require("../style/idea-roll.module.css"); @@ -40,6 +43,22 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { type name } + preliminaryFindings { + figures { + type + url + file { + childImageSharp { + gatsbyImageData( + width: 80 + height: 64 + layout: FIXED + quality: 80 + ) + } + } + } + } } } } @@ -55,40 +74,75 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { return ( <>
    - {ideas.map((item) => ( -
  • - {item.tags.length > 0 && ( -
    - {item.tags.map((tag, i) => ( - - {i > 0 && ( - - )} - - - ))} + {ideas.map((item) => { + const firstFigure = + item.preliminaryFindings?.figures?.[0] ?? null; + const gatsbyImage = firstFigure?.file?.childImageSharp + ? getImage(firstFigure.file.childImageSharp) + : null; + + return ( +
  • +
    + {item.tags.length > 0 && ( +
    + {item.tags.map((tag, i) => ( + + {i > 0 && ( + + )} + + + ))} +
    + )} + + {item.title} + +
    + by{" "} + {item.authors + .map((a) => a.name) + .join(" · ")} + {item.dataset + ? ` — ${item.dataset}` + : " — No public dataset"} +
    - )} - - {item.title} - -
    - by {item.authors.map((a) => a.name).join(" · ")} - {item.dataset - ? ` — ${item.dataset}` - : " — No public dataset"} -
    -
    • - ))} + + {(gatsbyImage || firstFigure?.url) && ( + + {gatsbyImage ? ( + + ) : ( + + )} + + )} + + ); + })}
{count !== undefined && (
From c91eed3ac48235b2edf0f05a21ee7ca9357ff195 Mon Sep 17 00:00:00 2001 From: meganrm Date: Mon, 1 Jun 2026 23:18:10 -0700 Subject: [PATCH 3/6] style: pill thumbnail with orange glow on idea list --- src/components/IdeaRoll.tsx | 28 +++++++++++++++++++++------- src/style/idea-roll.module.css | 14 +++++++++----- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx index 2828f00..d87cc32 100644 --- a/src/components/IdeaRoll.tsx +++ b/src/components/IdeaRoll.tsx @@ -50,8 +50,8 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { file { childImageSharp { gatsbyImageData( - width: 80 - height: 64 + width: 88 + height: 56 layout: FIXED quality: 80 ) @@ -130,13 +130,27 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { image={gatsbyImage} alt="" className={thumbnail} + imgStyle={{ + transform: "scale(1.2)", + transformOrigin: "center", + }} /> ) : ( - +
+ +
)} )} diff --git a/src/style/idea-roll.module.css b/src/style/idea-roll.module.css index 99f4502..b1fe041 100644 --- a/src/style/idea-roll.module.css +++ b/src/style/idea-roll.module.css @@ -74,11 +74,15 @@ } .thumbnail { - width: 80px; - height: 64px; - object-fit: cover; - border-radius: 3px; + width: 88px; + height: 56px; + border-radius: 28px; + overflow: hidden; flex-shrink: 0; display: block; - overflow: hidden; + box-sizing: border-box; + box-shadow: + 0 0 0 1.5px rgba(255, 110, 0, 0.4), + 0 0 10px 2px rgba(255, 110, 0, 0.2), + 0 2px 8px rgba(0, 0, 0, 0.15); } From b9050f5ea35b2df5823104c63af86f2ed3da3d3c Mon Sep 17 00:00:00 2001 From: meganrm Date: Tue, 2 Jun 2026 15:11:31 -0700 Subject: [PATCH 4/6] refactor: extract FigureThumbnail component from IdeaRoll --- src/components/FigureThumbnail.tsx | 61 ++++++++++++++++++++++++++++++ src/components/IdeaRoll.tsx | 38 +++---------------- 2 files changed, 67 insertions(+), 32 deletions(-) create mode 100644 src/components/FigureThumbnail.tsx diff --git a/src/components/FigureThumbnail.tsx b/src/components/FigureThumbnail.tsx new file mode 100644 index 0000000..42f483e --- /dev/null +++ b/src/components/FigureThumbnail.tsx @@ -0,0 +1,61 @@ +import React from "react"; + +import { GatsbyImage, IGatsbyImageData, getImage } from "gatsby-plugin-image"; + +interface FigureThumbnailProps { + figure: { + url?: string | null; + file?: { + childImageSharp?: { + gatsbyImageData: IGatsbyImageData; + } | null; + } | null; + }; + className?: string; +} + +const scaleStyle: React.CSSProperties = { + transform: "scale(1.2)", + transformOrigin: "center", +}; + +const imgFillStyle: React.CSSProperties = { + width: "100%", + height: "100%", + objectFit: "cover", + objectPosition: "center", + display: "block", + ...scaleStyle, +}; + +const FigureThumbnail: React.FC = ({ + className, + figure, +}) => { + const gatsbyImage = figure.file?.childImageSharp + ? getImage(figure.file.childImageSharp) + : null; + + if (gatsbyImage) { + return ( + + ); + } + + if (figure.url) { + return ( +
+ +
+ ); + } + + return null; +}; + +export default FigureThumbnail; diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx index d87cc32..fba2b4a 100644 --- a/src/components/IdeaRoll.tsx +++ b/src/components/IdeaRoll.tsx @@ -1,8 +1,8 @@ import React from "react"; import { Link, graphql, useStaticQuery } from "gatsby"; -import { GatsbyImage, getImage } from "gatsby-plugin-image"; +import FigureThumbnail from "./FigureThumbnail"; import { TagPopover } from "./TagPopover"; const { @@ -77,9 +77,6 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { {ideas.map((item) => { const firstFigure = item.preliminaryFindings?.figures?.[0] ?? null; - const gatsbyImage = firstFigure?.file?.childImageSharp - ? getImage(firstFigure.file.childImageSharp) - : null; return (
  • @@ -119,39 +116,16 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
    • - {(gatsbyImage || firstFigure?.url) && ( + {firstFigure && ( - {gatsbyImage ? ( - - ) : ( -
    - -
    - )} + )} From 7ed3b01f2cda1eb5f11b674082195ed5b50b1f17 Mon Sep 17 00:00:00 2001 From: meganrm Date: Tue, 9 Jun 2026 14:43:12 -0700 Subject: [PATCH 5/6] move to stylesheet --- src/components/FigureThumbnail.tsx | 20 ++++---------------- src/style/figure-thumbnail.module.css | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 src/style/figure-thumbnail.module.css diff --git a/src/components/FigureThumbnail.tsx b/src/components/FigureThumbnail.tsx index 42f483e..1308bb4 100644 --- a/src/components/FigureThumbnail.tsx +++ b/src/components/FigureThumbnail.tsx @@ -2,6 +2,8 @@ import React from "react"; import { GatsbyImage, IGatsbyImageData, getImage } from "gatsby-plugin-image"; +const { imgFill, scale } = require("../style/figure-thumbnail.module.css"); + interface FigureThumbnailProps { figure: { url?: string | null; @@ -14,20 +16,6 @@ interface FigureThumbnailProps { className?: string; } -const scaleStyle: React.CSSProperties = { - transform: "scale(1.2)", - transformOrigin: "center", -}; - -const imgFillStyle: React.CSSProperties = { - width: "100%", - height: "100%", - objectFit: "cover", - objectPosition: "center", - display: "block", - ...scaleStyle, -}; - const FigureThumbnail: React.FC = ({ className, figure, @@ -42,7 +30,7 @@ const FigureThumbnail: React.FC = ({ image={gatsbyImage} alt="" className={className} - imgStyle={scaleStyle} + imgClassName={scale} /> ); } @@ -50,7 +38,7 @@ const FigureThumbnail: React.FC = ({ if (figure.url) { return (
    - +
    ); } diff --git a/src/style/figure-thumbnail.module.css b/src/style/figure-thumbnail.module.css new file mode 100644 index 0000000..9dbfae0 --- /dev/null +++ b/src/style/figure-thumbnail.module.css @@ -0,0 +1,14 @@ +.scale { + transform: scale(1.2); + transform-origin: center; +} + +.imgFill { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + display: block; + transform: scale(1.2); + transform-origin: center; +} From cd7d6207fa7e70ceac2bca788e832087509846b6 Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 11 Jun 2026 14:45:40 -0700 Subject: [PATCH 6/6] reduce hardcoded values --- src/components/FigureThumbnail.tsx | 5 ++++- src/components/IdeaRoll.tsx | 6 ++++++ src/style/colors.css | 1 + src/style/idea-roll.module.css | 6 ++++-- 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/FigureThumbnail.tsx b/src/components/FigureThumbnail.tsx index 1308bb4..c479f52 100644 --- a/src/components/FigureThumbnail.tsx +++ b/src/components/FigureThumbnail.tsx @@ -14,11 +14,13 @@ interface FigureThumbnailProps { } | null; }; className?: string; + style?: React.CSSProperties; } const FigureThumbnail: React.FC = ({ className, figure, + style, }) => { const gatsbyImage = figure.file?.childImageSharp ? getImage(figure.file.childImageSharp) @@ -31,13 +33,14 @@ const FigureThumbnail: React.FC = ({ alt="" className={className} imgClassName={scale} + style={style} /> ); } if (figure.url) { return ( -
    +
    ); diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx index fba2b4a..324a6e9 100644 --- a/src/components/IdeaRoll.tsx +++ b/src/components/IdeaRoll.tsx @@ -27,6 +27,8 @@ interface IdeaRollProps { count?: number; } +const THUMBNAIL_SIZE = { width: 88, height: 56 }; + const IdeaRoll = ({ count }: IdeaRollProps) => { const queryData = useStaticQuery(graphql` query IdeaRoll { @@ -123,6 +125,10 @@ const IdeaRoll = ({ count }: IdeaRollProps) => { aria-hidden="true" > diff --git a/src/style/colors.css b/src/style/colors.css index 5d792ca..eb25b80 100644 --- a/src/style/colors.css +++ b/src/style/colors.css @@ -42,6 +42,7 @@ --main-card-header-color: var(--primary-color); --callout-box-bg-color: var(--PAGE_2); --callout-box-border-color: var(--ALLEN_ORANGE); + --thumbnail-border-color: var(--ALLEN_ORANGE); /* Layout */ --content-max-width: 1200px; diff --git a/src/style/idea-roll.module.css b/src/style/idea-roll.module.css index b1fe041..6366f1a 100644 --- a/src/style/idea-roll.module.css +++ b/src/style/idea-roll.module.css @@ -82,7 +82,9 @@ display: block; box-sizing: border-box; box-shadow: - 0 0 0 1.5px rgba(255, 110, 0, 0.4), - 0 0 10px 2px rgba(255, 110, 0, 0.2), + 0 0 0 1.5px + color-mix(in srgb, var(--thumbnail-border-color) 40%, transparent), + 0 0 10px 2px + color-mix(in srgb, var(--thumbnail-border-color) 20%, transparent), 0 2px 8px rgba(0, 0, 0, 0.15); }