[PR #1509] [MERGED] fix(staffml/announcement): top-align megaphone icon + gate dismiss on live #7375

New Issue

GiteaMirror · 2026-04-24T17:27:19-05:00

GiteaMirror commented

2026-04-24 17:27:19 -05:00

📋 Pull Request Information

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

Base: dev ← Head: fix/staffml-banner-polish

📝 Commits (1)

8141a01 fix(staffml/announcement): top-align megaphone icon + gate dismiss on live

📊 Changes

3 files changed (+25 additions, -2 deletions)

View changed files

📝 interviews/staffml/src/app/globals.css (+5 -1)
📝 interviews/staffml/src/components/AnnouncementBar.tsx (+8 -1)
📝 interviews/staffml/src/lib/env.ts (+12 -0)

📄 Description

Summary

Two follow-ups to the AnnouncementBar merged in PR #1506:

CSS: switch #quarto-announcement from align-items: center to align-items: flex-start. With the 3–4 content lines the bar typically carries, centering floated the megaphone icon to the middle of the bar and read as a layout bug. Now matches the Quarto sibling sites' presentation where the megaphone sits on line 1's baseline.
Dismiss gated on live deploy: the × is now shown only when IS_LIVE_DEPLOY (new boolean in src/lib/env.ts) is true. On the dev-preview deploy (harvard-edge.github.io/cs249r_book_dev) the bar is intentionally persistent — every pageview during development should see the ecosystem pitch. On live (mlsysbook.ai) the bar becomes dismissable so returning visitors aren't nagged. Piggybacks on the existing NEXT_PUBLIC_ECOSYSTEM_BASE — no new env var.

Files

interviews/staffml/src/app/globals.css — one-line CSS change
interviews/staffml/src/lib/env.ts — add IS_LIVE_DEPLOY boolean
interviews/staffml/src/components/AnnouncementBar.tsx — consume IS_LIVE_DEPLOY to gate dismiss

Verification (Playwright)

Dev mode (NEXT_PUBLIC_ECOSYSTEM_BASE=https://harvard-edge.github.io/cs249r_book_dev):

has × action in DOM? false ✓
Bar renders with megaphone top-aligned on line 1 ✓

Live mode (default):

has × action in DOM? true ✓
× sits at top-right, aligned with line 1 ✓
Click × → .hidden class → sessionStorage["quarto-announcement-dismissed-{hash}"] = "1" → persists across reload ✓

Test plan

TypeScript tsc --noEmit clean
Dev-mode Playwright screenshot: megaphone top-aligned, no ×
Live-mode Playwright screenshot: megaphone top-aligned, × visible
Dismiss + persistence still works on live

_{🔄 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/1509 **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:** `fix/staffml-banner-polish` --- ### 📝 Commits (1) - [`8141a01`](https://github.com/harvard-edge/cs249r_book/commit/8141a019a0ebb4b0ee9f481510ca323e12d6fd46) fix(staffml/announcement): top-align megaphone icon + gate dismiss on live ### 📊 Changes **3 files changed** (+25 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `interviews/staffml/src/app/globals.css` (+5 -1) 📝 `interviews/staffml/src/components/AnnouncementBar.tsx` (+8 -1) 📝 `interviews/staffml/src/lib/env.ts` (+12 -0) </details> ### 📄 Description ## Summary Two follow-ups to the `AnnouncementBar` merged in PR #1506: 1. **CSS**: switch `#quarto-announcement` from `align-items: center` to `align-items: flex-start`. With the 3–4 content lines the bar typically carries, centering floated the megaphone icon to the middle of the bar and read as a layout bug. Now matches the Quarto sibling sites' presentation where the megaphone sits on line 1's baseline. 2. **Dismiss gated on live deploy**: the × is now shown only when `IS_LIVE_DEPLOY` (new boolean in `src/lib/env.ts`) is true. On the dev-preview deploy (`harvard-edge.github.io/cs249r_book_dev`) the bar is intentionally persistent — every pageview during development should see the ecosystem pitch. On live (`mlsysbook.ai`) the bar becomes dismissable so returning visitors aren't nagged. Piggybacks on the existing `NEXT_PUBLIC_ECOSYSTEM_BASE` — no new env var. ## Files - `interviews/staffml/src/app/globals.css` — one-line CSS change - `interviews/staffml/src/lib/env.ts` — add `IS_LIVE_DEPLOY` boolean - `interviews/staffml/src/components/AnnouncementBar.tsx` — consume `IS_LIVE_DEPLOY` to gate dismiss ## Verification (Playwright) Dev mode (`NEXT_PUBLIC_ECOSYSTEM_BASE=https://harvard-edge.github.io/cs249r_book_dev`): - `has × action in DOM? false` ✓ - Bar renders with megaphone top-aligned on line 1 ✓ Live mode (default): - `has × action in DOM? true` ✓ - × sits at top-right, aligned with line 1 ✓ - Click × → `.hidden` class → `sessionStorage["quarto-announcement-dismissed-{hash}"] = "1"` → persists across reload ✓ ## Test plan - [x] TypeScript `tsc --noEmit` clean - [x] Dev-mode Playwright screenshot: megaphone top-aligned, no × - [x] Live-mode Playwright screenshot: megaphone top-aligned, × visible - [x] Dismiss + persistence still works on live --- <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:19 -05:00

GiteaMirror closed this issue

2026-04-24 17:27:20 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#7375