Research page: data-driven card grid layout#44
Merged
Conversation
Convert the long-scroll research.md to a data-driven card grid layout.
Each of the four current projects is a col-md-6 card with thumbnail
image (optional), title, and full description; cards pair side-by-side
on desktop and collapse to one per row on smaller viewports.
Schema in _data/research.yml mirrors the people YAML pattern:
- title: string
image: string (optional thumbnail)
caption: string (optional, italic under thumbnail)
body: string (markdown, rendered via markdownify)
The body field accepts inline markdown links and HTML <figure> blocks
for secondary images (used by the real-time-analysis project to embed
its second figure inline). This matches research.md's previous content
exactly — no editorial changes, just structural ones.
Files:
- _data/research.yml (new)
- research.html (new) — data-driven Liquid loop, replaces research.md
- research.md (removed)
- css/research.css (new) — card grid + thumbnail + body figure styles
- docs/screenshots/research-card-grid.png — Playwright capture at
1400x900 attached so the PR description can render inline
Per the original report's recommendation, switch from full-body cards
to summary-only cards with a "Read more" disclosure that reveals the
full description inline. Closed page now fits all four projects in a
single viewport, which is the original report's scannability goal.
Schema gains a required `summary` field — one-sentence pitch shown on
the closed card. Body goes inside <details> for the inline expand.
Initial summaries extracted from the existing prose; lab should review.
CSS styles the native <details>/<summary> as a subtle link ("▸ Read
more" closed, "▾ Read less" open). align-items: stretch keeps card
rows clean even when one card is expanded (sibling has unused space
below; alternative is uneven row heights — same total page height
either way).
docs/screenshots/ updated with both states (closed + one expanded)
so the PR description can render them inline.
The ::before pseudo-element was rendering "▸ Read more" AND the literal <summary>Read more</summary> text was rendering, producing "▸ Read moreRead more" closed and "▾ Read lessRead more" open. Fix: keep only the arrow indicator in ::before (▸ / ▾, with explicit margin-right for spacing), and swap the literal label text via two spans toggled by the details[open] state: <summary><span class="show-closed">Read more</span><span class="show-open">Read less</span></summary> Both labels stay in the DOM for predictable screen reader output; CSS hides whichever one isn't current.
These were a workaround for not having a way to share images directly with reviewers from my sandbox — committing them and linking from the PR description got the images visible inline, but at the cost of ~1 MB of repo growth per screenshotted PR. Same anti-pattern that issue #34's broken-image hook + #35's orphan cleanup were trying to prevent. Going forward: describe changes textually in PR descriptions; if screenshots are needed, the user can drop them into PR comments via the GitHub web UI (those go to user-attachments.githubusercontent.com, never the repo). Add docs/screenshots/ to .gitignore so accidental future commits get caught locally rather than at the size-cap hook.
Contributor
Summary
Errors per inputErrors in _site/learning.html
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Convert the research page from the long-scroll Markdown layout into a data-driven card grid with summary + "Read more" disclosure, matching the original report's scannability recommendation.
_data/research.yml(new) — one entry per project.title, optionalimage+caption, requiredsummary(one-sentence pitch on the closed card),body(markdown, full description revealed via<details>).research.html(replacesresearch.md) — Liquid loop, each project is acol-md-6card with summary visible and body inside an HTML5<details>element. No JS — native browser disclosure.css/research.css— flexbox row so card pairs match height; styled<summary>as a subtle "▸ Read more" / "▾ Read less" link; widened inter-card horizontal whitespace from Bootstrap's default 15px gutter to 30px.Content preserved exactly from the original
research.md; summaries paraphrased from the existing prose — please review and edit the summaries to match the lab's voice.What it looks like
Closed (default): all four projects fit in a single viewport at 1400×900 — image at top of each card, title, one-sentence summary, "▸ Read more" toggle.
Expanded (one card open): clicked card grows to fit the full body description (and any inline
<figure>); paired sibling stretches to match height (clean grid alignment, with unused space below the closed sibling); subsequent rows reflow down.(Screenshots intentionally not committed to the repo — see commit
5314689for the rationale. If you'd like to see them inline, I can describe what they look like in more detail or you can preview locally withbundle exec jekyll serve.)Test plan
bundle exec jekyll buildcleanscripts/check_image_refs.py→ clean<details>semantics: keyboard-accessible, no JS requiredNotes
research.md). Easy to add by droppingimage: ...into its YAML entry.https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7