activity: add the Latest activity strip under the home page's news cards

[mmcky]

What changes

The home page's "Latest News" section gets a compact "Latest activity" strip under its three cards, as decided in #266 (option c1) and amended on #279.

• The strip: an <h3> "Latest activity", the view's three newest rows (site.data.activity_view.strip), each row one link, and "View all activity →" to /activity/. A row links to its release, its live site or, for an editions row or a release group, its day on /activity/ (/activity/#activity-2026-08-03).
• Below 1200px it is the stacked list at every width: rows at least 44px tall, icons kept, the date and tag on the first line and the title (up to 2 lines) under them.
• From 1200px it is one line, 48px tall. Each row gets an equal share of the line, capped at its content width, and no row gets narrower than its icon, date, tag and one letter of its title. So only titles are cut: a translation's language and a group's label always show whole.
• Markup: inline in _layouts/home.html (it's used once), built from the shared activity/meta.html (with tag=false) and activity/title.html, inside mathjax_ignore, with every field escaped, attributes included. No JavaScript. With no Activity data, no strip shows.
• Card dates read "Jul 17, 2026" (%b %-d, %Y), as on /news/. Only the format changes: each card keeps its day.
• "View all news" goes full width below 768px (d-block d-md-inline-block), and keeps its 46px height and 24px top margin.
• README.md adds the home page to where Activity appears.

Files: _layouts/home.html (+28 −3), assets/main.scss (+151, one block after .featured), README.md (one line).

Defaults to review

• Sizing on one line (1200px and wider). Each row gets an equal share of the line but no more than its content needs (flex: 1 1 0; max-width: max-content), so short titles show whole and a long one takes the rest. The title can wrap anywhere and is clamped to one line, so it is the only part of a row that shrinks. With today's rows at 1200–1399px, the long title reads "Intermediate Quantitative Eco…" (29 of 47 characters; the handoff's equal shares gave 23), and QuantEcon.py v0.12.0 and GameTheory.jl v0.7.2 show whole. From 1400px everything shows whole. The alternative, sizing in proportion to content (flex: 0 1 auto), would show 38 characters of that title but cut both release versions to "v0…".
• Tags. On the one line, a row's tag follows its title as "· French", "· 3 editions" or "· 4 releases · same day", in the date's style (13px, #666). The stacked strip, the rail and the log show tags the same way. The handoff's one-line drawing had "(French)", in bold as part of the title.
• Book rows get bi-book and the visually hidden type word "Book update:", which the view already provides, like every other row. This reads the decision's "the label" as that type word. A visible "· Book update" tag would be a small change.
• Layout and spacing. Below 1200px the strip is the stacked list at every width, on the handoff's soft-blue phone surface (#eef4fb, with #dbe8f5 lines); from 1200px it is the light one-line strip (#f8f9fc). Its top margin is 24px at every width, to match the gap between the cards; the handoff's phone drawing has 16px. "View all news" keeps its 24px top margin (the handoff has 20px below 768px).
• Full titles. The full title and version go in a title attribute on the title itself, not on the link, so screen readers don't hear them a second time as the link's description.
• Hover. Only the title changes, to #174867 and underlined, in both layouts. The date and tag keep their colour.
• No data. When there is no Activity data, no strip shows, and "View all news" stays.
• Markup. The strip is written inline, since it is used once, so AGENTS.md's list of includes doesn't change.
• Card dates. Only the format changes; no <time> element is added.
• Where the styles go. After the home page's .featured rules, not in the Activity section, to stay clear of Add the Activity rail and mobile panel to /news/ #278's rail styles.

How it was tested, and on which data

The preview builds this branch, cut from 88beeef, so until main is merged in it shows the frozen rows (Sep 27, 24 and 23). Use it to judge the layout. The three expected rows were checked on a build of #276's frozen data (a config overlay with data_dir: .github/scripts/fixtures). Everything below was measured in headless Chrome 154.

• The three newest rows (handoff check 5). Sep 27 "Lecture update:" Intermediate Quantitative Economics with Python, linking to https://python.quantecon.org/; Sep 24 "Release:" QuantEcon.py v0.12.0 and Sep 23 "Release:" GameTheory.jl v0.7.2, each linking to its release. Accessible names read, for example, "Release: Sep 24 QuantEcon.py v0.12.0".
• Placeholders, at 1200, 1280 and 1440px. P1 is 2026-08-02-software.yml plus the four Aug 3 entries of 2026-08-09-lectures.yml: its strip is the Aug 3 lecture row, "· 3 editions" and "· 4 releases · same day". P2 is P1 without the Aug 3 lecture entry and with the Simplified Chinese entry re-dated to Aug 4: "· Simplified Chinese", "· 2 editions" and "· 4 releases · same day". In both, at every width, every tag and date lies inside its row and is one line high, the strip is one line and 48px tall, and nothing scrolls sideways.
• How much of each title shows (approximate). At 1200 and 1280px: P1 21, 12 and 1 characters, P2 4, 12 and 1. At 1440px: P1 30, 20 and 11, P2 12, 20 and 11. Tags are always whole.
• Squeezed. With the list forced to 700px, the tagged rows keep their date, tag and one letter of title ("B…", "P…"), and the other rows give way.
• Frozen rows at wider widths. At 1200–1399px the long title shows 29 of 47 characters and both releases show whole; at 1400, 1440 and 1920px everything shows whole.
• Stacked, below 1200px. At 320, 360, 390, 576, 767, 768, 992 and 1199px, on the frozen rows, P1, P2 and a set with a book row (32 cases): no horizontal scroll (4px at 992px, as on main), nothing past the strip's edge, row links 44 to 64.6px tall, every tag on its date's line, titles at most 2 lines, "View all activity →" 48px tall, and "View all news" full width below 768px only and 46px tall.
• Contrast. Every text pair passes AA, hover included. The lowest is 4.59:1, #0072bc on #eef4fb ("View all activity →" below 1200px); on the one line the lowest is 4.83:1, and the date, tag and label are 5.45:1.
• Focus and targets. Tabbing reaches all four links, each with a 2px solid #0072bc ring at a 2px offset, at 1440, 1200 and 390px. From 1200px the links are 19.6px tall and 41px apart, within WCAG 2.5.8's spacing exception.
• Merged rows. Following P1's editions and group rows from the home page lands on Aug 3 and Aug 2 on /activity/, below the header and the sponsor bar, at 1440 and 390px.
• Hostile data. A lecture row whose project holds ", &, <b> and $5 to $10, with the URL query ?a=1&b="2", comes out escaped in the text, the href and the title attribute, and MathJax typesets nothing in the strip. A control copy without mathjax_ignore typesets it ("5to10"). The book row shows bi-book and "Book update:".
• No data. No strip, and "View all news" still shows.
• Card dates. "Jul 17, 2026", "Jul 14, 2026" and "Jun 28, 2026": the same days main shows as "17 Jul 2026", "14 Jul 2026" and "28 Jun 2026".
• Build compared with main, with the ?v= stamps, the feed's lastBuildDate and the sitemap's lastmod masked: only index.html, README.md and main.css (with its map) change.
• CI's checks, run locally: the Activity data check with --base at the merge base, test-check-activity-data.rb (38 runs, 0 failures), test-activity.rb (51 runs, 0 failures) and JEKYLL_ENV=production bundle exec jekyll build, with no new warnings.

When to merge

After the Activity feed's first live PR has merged on main (the go-live of QuantEcon/reports-activity#91), as decided on #279, so the strip never launches on the frozen rows.

Please look in iOS Safari and Firefox

The one-line layout rests on a one-line -webkit-line-clamp with word-break: break-all, on max-width: max-content on the rows, and on how flex items size to their content. It was measured in Chrome only. In a browser that ignores max-content, the rows fall back to the handoff's equal shares. Please also check the stacked strip at 390px.

Pre-existing, not changed here

• At 992px the home page scrolls 4px sideways, on main too, from the Workshops section's .row.gx-5 and the footer.
• The sponsor bar pops in after the page loads.

Notes for #278

• README.md:25 is changed here too, so whichever PR merges second settles a one-line conflict there.
• The strip's styles sit after .featured, away from the Activity section.
• .activity-meta__icon's colour is scoped per view (under .activity-log on /activity/, and under .activity-strip__link here). If Add the Activity rail and mobile panel to /news/ #278 adds a shared rule, the strip's copy becomes redundant.

Closes #279.
Part of #271.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for grand-swan-ca5201 ready!

Name	Link
🔨 Latest commit	f5aaafd
🔍 Latest deploy log	https://app.netlify.com/projects/grand-swan-ca5201/deploys/6abd8f8179f7d60008c973c7
😎 Deploy Preview	https://deploy-preview-292--grand-swan-ca5201.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]

Copilot review overview

🔵 Needs a closer look

Correctness rests on responsive CSS behavior (-webkit-line-clamp, max-content flex sizing) that the author explicitly asks be verified visually in iOS Safari and Firefox, which automated review cannot confirm.

Review effort: Balanced
Findings: None

What changed in this PR

This PR adds a compact "Latest activity" strip beneath the home page's three "Latest News" cards, fulfilling decision c1 from #266 and the amendment in #279. The strip renders the three newest rows from the build-time site.data.activity_view.strip, each as a single link, inside a mathjax_ignore wrapper with every field HTML-escaped. It is a stacked list below 1200px and a single capped-width flex line from 1200px, with a "View all activity →" link; it renders nothing when there is no Activity data. The change also modernizes the news-card date format and makes "View all news" full-width on small screens.

Changes:

• Add the inline "Latest activity" strip markup to _layouts/home.html, reusing the shared activity includes with tag=false and rendering the tag separately.
• Add .activity-strip* styles to assets/main.scss (stacked below 1200px, one line from 1200px), placed after .featured to stay clear of #278's rail styles.
• Switch the news-card date to %b %-d, %Y (matching /news/) and make "View all news" full-width below 768px; document the home-page Activity placement in README.md.

File	Description
_layouts/​home.html	Adds the escaped, mathjax_ignore-wrapped strip built from activity/meta.html/activity/title.html; updates the card date format and the "View all news" button width.
assets/​main.scss	Adds responsive .activity-strip styles with a stacked mobile layout and a content-capped single-line desktop layout, plus focus-visible ring.
README.md	Notes that Activity's three newest rows now also appear on the home page.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.