[aashish254]

fix(theme-classic): show new announcement bar id on first load

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Closes #12646.

When a user dismisses an announcement bar and the site later ships a new
announcement with a different themeConfig.announcementBar.id, the new bar is
not visible on the first page load — it only appears after a second reload.
The id is documented precisely as the way to re-show the bar to users who
closed the previous one, so this defeats that feature.

Root cause: two places decide visibility and only one respects the id.

1. The pre-hydration inline script (getAnnouncementBarInlineScript) sets
   data-announcement-bar-initially-dismissed from
   docusaurus.announcement.dismiss alone — it never reads
   docusaurus.announcement.id. After a previous dismissal it sets true.
2. CSS html[data-announcement-bar-initially-dismissed='true'] .announcementBar { display: none; }
   hides the bar.
3. After hydration, AnnouncementBarProvider correctly detects the new id,
   resets dismiss=false and re-activates the bar — but nothing clears the
   stale data attribute, so the rendered bar stays hidden by CSS.

Fix: the inline script now compares the stored docusaurus.announcement.id to
the configured id. A dismissal only hides the bar for the same announcement;
when the id differs, the bar is treated as not dismissed and shows immediately.

What changed

• packages/docusaurus-theme-classic/src/inlineScripts.ts
  — getAnnouncementBarInlineScript now takes announcementId and gates the
  dismissed state on the stored id matching the configured one.
• packages/docusaurus-theme-classic/src/index.ts
  — passes announcementBar.id into the inline script.
• packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts
  — behavioral tests that actually execute the generated script against a mocked
  localStorage and assert the resulting data attribute.

Test Plan

Ran locally in the monorepo (pnpm install completed, all packages built):

• pnpm test packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts
  → Test Files 1 passed (1) / Tests 6 passed (6).
• Mutation check (the test is load-bearing): reverted only
  inlineScripts.ts to main via git stash and re-ran the suite →
  × re-shows the bar for a new id after a previous one was dismissed FAILED,
  other 5 passed. Restoring the fix makes all 6 pass. This proves the regression
  test genuinely catches the bug rather than snapshotting the fix.
• pnpm --filter @docusaurus/theme-classic build (runs tsc --build) → clean,
  so announcementBar.id typechecks as the announcementId: string param.
• pnpm exec eslint <3 changed files> → 0 errors / 0 warnings.
• pnpm exec oxfmt --list-different <3 changed files> → no diffs.
• pnpm exec cspell <3 changed files> → 0 issues.

Test cases added:

• brand-new announcement (nothing stored) → shown
• same id previously closed → stays dismissed
• new id after dismissing a previous one → shown (the regression)
• current id not dismissed → shown

Test links

No dogfooding page added: this is a pre-hydration <head> inline script +
localStorage behavior that isn't observable as a static deploy-preview page
(it requires two sequential builds with different announcementBar.id and a
browser dismissal in between). The unit tests exercise the exact generated
script and are the verifiable surface here. Happy to add a manual repro note if
maintainers want it in the test plan.

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/

Related issues/PRs

Closes #12646.

How to submit (for the human contributor)

The repo's AGENTS.md prohibits an AI agent from opening the PR, so run these yourself:

cd "github contribution /GIT/fb-work/docusaurus"
git checkout -b fix/announcement-bar-new-id
# (your three edited files are already in the working tree; commit them)
git commit -am "fix(theme-classic): show new announcement bar id on first load"
git remote add fork https://github.com/<your-user>/docusaurus.git  # if not present
git push -u fork fix/announcement-bar-new-id
gh pr create --repo facebook/docusaurus --base main \
  --title 'fix(theme-classic): show new announcement bar id on first load' \
  --body-file /Users/aashish/Desktop/docusaurus-12646-pr-body.md

Summary by CodeRabbit

• Bug Fixes
  • Announcement bar dismissal is now tracked per announcement.
  • New or updated announcements remain visible even when an earlier announcement was dismissed.
  • Previously dismissed announcements continue to stay hidden, while announcements that were explicitly restored remain visible.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 686803bf-118c-47a5-9aad-4224e6610722

📥 Commits

Reviewing files that changed from the base of the PR and between 7b6826b and 7e5e718.

📒 Files selected for processing: 3

• packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts
• packages/docusaurus-theme-classic/src/index.ts
• packages/docusaurus-theme-classic/src/inlineScripts.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

The announcement bar inline script now checks the stored announcement ID against the configured ID before setting the initial dismissal state. The theme passes the configured ID to the script, and tests cover matching and changed IDs.

Changes: Announcement dismissal

Layer / File(s)	Summary
Pass and check the announcement ID packages/docusaurus-theme-classic/src/inlineScripts.ts, packages/docusaurus-theme-classic/src/index.ts, packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts	The inline script accepts the configured announcement ID and checks it against the stored ID when determining initial dismissal. The theme passes the ID. Tests cover absent storage, matching and changed IDs, and stored undismissed state.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 7e5e7

The announcement ID change is ready to merge after normal checks; no actionable issue remains.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly describes the main fix: showing a new announcement bar ID on its first load.
Linked Issues check		Issue #12646 requires the pre-hydration script to compare the stored announcement ID with the configured ID, pass the configured ID from the theme index, and add a regression test. inlineScripts.ts …
Out of Scope Changes check		The reviewed changes are limited to the announcement inline script, its call site, and focused behavioral tests. The test changes directly support issue #12646. No unrelated implementation or test cha…

Full details: Linked Issues check

Explanation

Issue #12646 requires the pre-hydration script to compare the stored announcement ID with the configured ID, pass the configured ID from the theme index, and add a regression test. inlineScripts.ts returns false when the stored ID differs, index.ts passes announcementBar.id, and inlineScripts.test.ts verifies both changed-ID visibility and same-ID dismissal. The supplied test evidence reports all six tests passing.

Full details: Out of Scope Changes check

Explanation

The reviewed changes are limited to the announcement inline script, its call site, and focused behavioral tests. The test changes directly support issue #12646. No unrelated implementation or test changes are evidenced.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7e5e718
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/6ad8f77c0f327c0dfef0ff05
😎 Deploy Preview	https://deploy-preview-12752--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[aashish254]

Closing this as a duplicate of #12647, which has been open since Oct 14 and fixes the same root cause in the same file (getAnnouncementBarInlineScript now reads docusaurus.announcement.id and only honors a dismissal for the matching id).

Their version is also broader than mine: it additionally maps the legacy misspelled default id annoucement-bar (see #3338) and covers the React provider in packages/docusaurus-theme-common/src/contexts/announcementBar.tsx. Mine only touched the inline script. Deferring to #12647.

Leaving #12753 (the CommonMark trailing-hash title fix) open, as that is a separate bug.

(AI-assisted: drafted with an AI pair, reviewed by me.)