Migrate people.html to data-driven _data/people.yml; add scholar/bluesky/orcid icons#43
Merged
Merged
Conversation
Move lab member data out of hardcoded Liquid markup in people.html into a structured _data/people.yml file. Adding or updating a member is now a one-line YAML edit; people.html itself becomes a small data-driven loop. Two schemas: - Current members: rich card with image, description, and any of seven optional links (site, github, email, linkedin, plus scholar, bluesky, orcid as new additions). Rendered via _includes/person.html. - Former members: simpler alumni list with name + optional url, years, notes parenthetical, and "→ outcome" trailing text. Free-form HTML is supported in notes/outcome for the existing complex cases (e.g. Shariq's "USC PhD → Deepmind", Sujal's Hart Fellow link). The three new icons (scholar, bluesky, orcid) use inline SVG (from Simple Icons, CC0) with brand-colored buttons styled in css/people.css to match the existing bootstrap-social.css buttons. No visible content changes for current entries (verified by checking member names render and image alt text matches). The legacy "Sample Blog Post" placeholder posts are unaffected. This sets up the alumni-section feature from the original report naturally: it's already there in people.html. It also makes future moves toward a Decap CMS dramatically easier.
The new icons used .btn-social-icon, which has CSS that's designed for
the FontAwesome <i> child:
.btn-social-icon > :first-child {
position: absolute; left: 0; top: 0; bottom: 0;
width: 100% !important; ...
}
That forced the SVG to fill the button (width 100%, top 0, bottom 0,
left 0) which collided with my own SVG centering rules and produced an
invisible/distorted icon — most users saw just a colored square.
Use a fresh .person-svg-icon class instead, which doesn't inherit
btn-social-icon's first-child rules. Visually sized to match the
existing FA-based 34x34 social icons.
Also restore the always-emit <p><em>{{ person.title }}</em></p> in
person.html. The original template emitted the wrapper even when
title was undefined (which renders empty <p><em></em></p>); I'd made
it conditional, which slightly shifted card heights for members
without a title and contributed to Bootstrap 3 float reflow.
The home layout's body had `background-size: 80%` with no height set. In quirks mode (pre-PR-#42, when no doctype existed) body filled the viewport by default, so 80% scaled the [λ] logo nicely against the full window. After adding DOCTYPE in #42 standards mode kicked in, body shrinks to content height, and 80% scales against a much smaller body — which pushed the floated DUSOM image into visual overlap with the (now smaller) central [λ]. Setting min-height: 100vh restores the original visual.
Contributor
Summary
Errors per inputErrors in _site/learning.html
|
Three changes:
1) _data/people.yml restructured to one list per role (postdocs,
graduate_students, research_associates, undergraduates). Each
entry has an optional `current` flag — absent or true means
present member (renders as rich card), false means alumni
(renders as list item under "Former members"). Moving someone
to alumni is now one line: `current: false` plus optional
`years` / `outcome`. Existing image/desc/social fields can be
kept for historical reference; the template only renders the
relevant subset.
2) people.html rewritten to filter each role list by `current`
instead of reaching into nested `current.X` / `former.X`
subtrees. Uses Liquid's where_exp + where filters.
3) css/people.css: removed `.col-md-5 { font-size: 0.8em }` so
member descriptions render at default body font size (~1em).
4) home.html: changed background-size from 80% to `contain` so
the [λ] logo always fits the viewport instead of getting
clipped on the right edge.
The body-as-background-host approach kept getting tripped up: in quirks mode body's box was viewport-sized so background-size: 80% worked, but in standards mode the body grows to content height (navbar + DUSOM image floats), can be wider than viewport because of the float clearance, and `background-size: contain` against the oversized body pushes the SVG center past the viewport edge — visible as the "P[λ]ab" being clipped on the right. Move the background to a position:fixed inset:0 div with z-index:-1 so it's always exactly viewport-sized and centered in the visible area, regardless of what the body does. Drop the body's min-height trick. inset:0 spelled as top/right/bottom/left longhand since vnu's CSS rules don't recognise the (newer-but-standard) inset shorthand.
Restructure _includes/person.html so each member is a single col-md-6 card with photo (circular, 200x200) centered on top, name + italic title below, description, and a row of social icons. Two cards per row on desktop; collapses to one on narrow. Use flexbox on .row.full-width (the cards row) so cards with uneven description lengths wrap cleanly instead of stair-stepping the way Bootstrap 3's float grid does. Cards align at top; descriptions can be different lengths without breaking the next row's alignment.
…m hook The [λ] logo SVG has paths drawn outside its declared viewBox (0 0 500.38751 243.89999). When PR #35's backfill ran svgo on every SVG in the repo, the optimizer stripped attributes that were keeping that overflow content visible at scale — so any time the SVG was rendered larger than its natural 500x244 size, the "Lab" and the tail of "Computation" got cut off (the home page background). Restore the pre-svgo file (~8 KB larger; minor cost) and add an exclude for it in the svgo pre-commit hook so a future maintainer re-running the hook doesn't silently re-break the home page. Verified by Playwright screenshot at 1400x900: both the home page [λ] logo and the people page card grid render cleanly with the CDN-loaded Bootstrap.
Two card-layout polish fixes: 1. _includes/person.html: only emit <p class="person-title"><em>...</em></p> when person.title is set. Previously the wrapper always rendered, and an empty <em></em> meant CSS :empty couldn't hide it — so members without a title (e.g. John) showed a thin blank line between name and description. 2. css/people.css: switch the cards row from align-items: flex-start to align-items: stretch so paired cards match height within a row. With flex-start, a card with a long description was taller than its row neighbor and the icon rows didn't visually line up; with stretch the two cards in a row are the same height so the layout reads as a proper grid.
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
Migrate lab people data from hardcoded Liquid markup in
people.htmlinto a structured_data/people.ymlfile. Adding or updating a member is now a one-line YAML edit;people.htmlbecomes a thin data-driven loop. Pattern matches the Fraser Lab approach the original site report praised.Also adds three new optional link icons (Google Scholar, Bluesky, ORCID) on top of the existing site/github/email/linkedin.
Schema
Two schemas in one file:
Current members — rich card with image, description, and any of seven optional links:
Former members — simpler alumni-list schema:
notesandoutcomeallow inline HTML for the existing complex cases (e.g. Shariq's "USC PhD → Deepmind", Sujal's Hart Fellow link).New icons
Google Scholar, Bluesky, and ORCID use inline SVG (Simple Icons paths, CC0). The buttons reuse the existing
.btn-social-iconshell with three new brand-colored classes incss/people.css. They sit alongside the existing FontAwesome-driven icons with matching size and shape.Test plan
bundle exec jekyll buildclean_site/people.html→ 0 errorsscripts/check_image_refs.pyclean onpeople.htmlgrep): 23 icons total = 4 (John) + 3+3+3+3+4+3 (grad students)scholar:set)Notes
people.html, just driven from data now.aria-labelto each social-icon link while I was in there (the existing FontAwesome links had nothing for screen readers).https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Generated by Claude Code