github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-07 02:03:55 -05:00
Code Issues 85 Packages Projects Releases 24 Wiki Activity

[PR #1506] [MERGED] feat(staffml): announcement bar matching Quarto's identical structure + behavior #7373

New Issue
Closed
opened 2026-04-24 17:27:17 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-24 17:27:17 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1506
Author: @profvjreddi
Created: 4/24/2026
Status: ✅ Merged
Merged: 4/24/2026
Merged by: @profvjreddi

Base: dev ← Head: feat/staffml-announcement-bar

📝 Commits (1)

  • ad033c2 feat(staffml): announcement bar matching Quarto's identical structure + behavior

📊 Changes

4 files changed (+254 additions, -0 deletions)

View changed files

📝 interviews/staffml/src/app/globals.css (+83 -0)
📝 interviews/staffml/src/app/layout.tsx (+2 -0)
➕ interviews/staffml/src/components/AnnouncementBar.tsx (+123 -0)
➕ interviews/staffml/src/lib/announcement.ts (+46 -0)

📄 Description

Summary

Ports the unified announcement-bar pattern from PR #1505 (the nine Quarto sites) to StaffML's Next.js app. Because StaffML isn't Quarto, the banner is a React component + TypeScript config instead of a YAML metadata file — but the rendered DOM, CSS classes, icon glyphs, and dismissable behavior are identical to what Quarto emits.

What ships

File Role
src/lib/announcement.ts 4-line content config, same template as the nine Quarto sites
src/components/AnnouncementBar.tsx Client Component that emits Quarto's exact element tree
src/app/globals.css Recreates Bootstrap 5 .alert.alert-primary palette + Quarto's flex layout under the same selectors
src/app/layout.tsx Mounts <AnnouncementBar /> below the navbar (same stacking order as Quarto's position: below-navbar)

Emitted DOM (identical to Quarto's)

<div id=\"quarto-announcement\" data-announcement-id=\"{hash}\" class=\"alert alert-primary\">
  <i class=\"bi bi-megaphone quarto-announcement-icon\"></i>
  <div class=\"quarto-announcement-content\"><p>...<br>...</p></div>
  <i class=\"bi bi-x-lg quarto-announcement-action\"></i>
</div>

Dismiss behavior

  • Click × → adds .hidden → `display: none`
  • Writes `sessionStorage["quarto-announcement-dismissed-{hash}"] = "1"` (same key scheme Quarto uses)
  • Persists across reloads for the session
  • Hash is derived from content — a copy change auto-invalidates prior dismissals

Verification (Playwright against a local dev server)

Computed styles match the expected values exactly:

Property Value
display flex
background-color rgb(207, 226, 255)
color rgb(8, 66, 152)
border 1px solid rgb(182, 212, 254)
gap 12px
font-size 15.2px (0.95rem × 16px root)
font-family Inter
border-radius 0 (edge-to-edge, matching Quarto's sticky-navbar presentation)

Dismiss test: click × → `.hidden` class applied → sessionStorage written → stays hidden across reload. ✅

Theme handling

The bar uses the light alert palette regardless of StaffML's dark theme — matching Quarto, which does not re-tint the announcement bar for dark mode. The bar advertises the ecosystem's brand, not the current site's theme.

Dependencies

Bootstrap Icons (bi-megaphone, bi-x-lg) are already loaded by EcosystemBar.tsx via the jsdelivr CDN, so no new network dependency.

Test plan

  • Visual match verified (Playwright screenshot vs. Bootstrap 5 reference)
  • Dismiss + sessionStorage persistence verified
  • Computed styles verified end-to-end
  • TypeScript `tsc --noEmit` clean
  • Manual smoke once deployed

Closes the follow-up tracked in PR #1505.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1506 **Author:** [@profvjreddi](https://github.com/profvjreddi) **Created:** 4/24/2026 **Status:** ✅ Merged **Merged:** 4/24/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `feat/staffml-announcement-bar` --- ### 📝 Commits (1) - [`ad033c2`](https://github.com/harvard-edge/cs249r_book/commit/ad033c2b95b43c34c46b94b0494de73af59fa2f2) feat(staffml): announcement bar matching Quarto's identical structure + behavior ### 📊 Changes **4 files changed** (+254 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `interviews/staffml/src/app/globals.css` (+83 -0) 📝 `interviews/staffml/src/app/layout.tsx` (+2 -0) ➕ `interviews/staffml/src/components/AnnouncementBar.tsx` (+123 -0) ➕ `interviews/staffml/src/lib/announcement.ts` (+46 -0) </details> ### 📄 Description ## Summary Ports the unified announcement-bar pattern from PR #1505 (the nine Quarto sites) to StaffML's Next.js app. Because StaffML isn't Quarto, the banner is a React component + TypeScript config instead of a YAML metadata file — but the **rendered DOM, CSS classes, icon glyphs, and dismissable behavior are identical** to what Quarto emits. ## What ships | File | Role | |---|---| | `src/lib/announcement.ts` | 4-line content config, same template as the nine Quarto sites | | `src/components/AnnouncementBar.tsx` | Client Component that emits Quarto's exact element tree | | `src/app/globals.css` | Recreates Bootstrap 5 `.alert.alert-primary` palette + Quarto's flex layout under the same selectors | | `src/app/layout.tsx` | Mounts `<AnnouncementBar />` below the navbar (same stacking order as Quarto's `position: below-navbar`) | ## Emitted DOM (identical to Quarto's) ```html <div id=\"quarto-announcement\" data-announcement-id=\"{hash}\" class=\"alert alert-primary\"> <i class=\"bi bi-megaphone quarto-announcement-icon\"></i> <div class=\"quarto-announcement-content\"><p>...<br>...</p></div> <i class=\"bi bi-x-lg quarto-announcement-action\"></i> </div> ``` ## Dismiss behavior - Click × → adds `.hidden` → \`display: none\` - Writes \`sessionStorage[\"quarto-announcement-dismissed-{hash}\"] = \"1\"\` (same key scheme Quarto uses) - Persists across reloads for the session - Hash is derived from content — a copy change auto-invalidates prior dismissals ## Verification (Playwright against a local dev server) Computed styles match the expected values exactly: | Property | Value | |---|---| | display | `flex` | | background-color | `rgb(207, 226, 255)` | | color | `rgb(8, 66, 152)` | | border | `1px solid rgb(182, 212, 254)` | | gap | `12px` | | font-size | `15.2px` (0.95rem × 16px root) | | font-family | Inter | | border-radius | `0` (edge-to-edge, matching Quarto's sticky-navbar presentation) | Dismiss test: click × → \`.hidden\` class applied → sessionStorage written → stays hidden across reload. ✅ ## Theme handling The bar uses the **light alert palette regardless of StaffML's dark theme** — matching Quarto, which does not re-tint the announcement bar for dark mode. The bar advertises the ecosystem's brand, not the current site's theme. ## Dependencies Bootstrap Icons (`bi-megaphone`, `bi-x-lg`) are already loaded by `EcosystemBar.tsx` via the jsdelivr CDN, so no new network dependency. ## Test plan - [x] Visual match verified (Playwright screenshot vs. Bootstrap 5 reference) - [x] Dismiss + sessionStorage persistence verified - [x] Computed styles verified end-to-end - [x] TypeScript \`tsc --noEmit\` clean - [ ] Manual smoke once deployed Closes the follow-up tracked in PR #1505. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-24 17:27:17 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: socratiq
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
link-health
link-rot
priority-high
pull-request
Mirrored from GitHub Pull Request
 staffml
type: bug
type: citation
type: code
type: errata
type: improvement
type: new
type: question
vault-sli
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#7373
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?