fix(theme-classic): respect announcement bar id in inline dismissal script

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

@@ -6,7 +6,10 @@
  */
 
 import {describe, expect, it} from 'vitest';
-import {getThemeInlineScript} from '../inlineScripts';
+import {
+  getThemeInlineScript,
+  getAnnouncementBarInlineScript,
+} from '../inlineScripts';
 
 describe('inlineScripts', () => {
   it('inline javascript for default options', () => {
@@ -40,4 +43,82 @@ describe('inlineScripts', () => {
       }),
     ).toMatchSnapshot();
   });
+
+  it('inline javascript for announcement bar with id', () => {
+    expect(
+      getAnnouncementBarInlineScript({
+        siteStorage: {
+          type: 'localStorage',
+          namespace: '',
+        },
+        announcementBar: {
+          id: 'announcement-2',
+        },
+      }),
+    ).toContain('var configuredId = "announcement-2";');
+  });
+
+  it('evaluates announcement bar dismissal correctly with configuredId and viewedId', () => {
+    function evaluateScript(script: string, storage: Record<string, string>) {
+      let resultAttr = '';
+      const fakeLocalStorage = {
+        getItem: (k: string) => storage[k] ?? null,
+      };
+      const fakeDocElement = {
+        setAttribute: (_attr: string, val: string | boolean) => {
+          resultAttr = String(val);
+        },
+      };
+      // Execute the IIFE with stubbed globals
+      const fn = new Function('localStorage', 'document', script);
+      fn(fakeLocalStorage, {documentElement: fakeDocElement});
+      return resultAttr;
+    }
+
+    const scriptWithId = getAnnouncementBarInlineScript({
+      siteStorage: {
+        type: 'localStorage',
+        namespace: '',
+      },
+      announcementBar: {
+        id: 'announcement-2',
+      },
+    });
+
+    // Case 1: No stored viewedId (or empty) despite previously dismissed announcement -> should NOT be dismissed
+    expect(
+      evaluateScript(scriptWithId, {
+        'docusaurus.announcement.dismiss': 'true',
+      }),
+    ).toBe('false');
+
+    // Case 2: Stored viewedId differs from configuredId -> should NOT be dismissed
+    expect(
+      evaluateScript(scriptWithId, {
+        'docusaurus.announcement.dismiss': 'true',
+        'docusaurus.announcement.id': 'announcement-1',
+      }),
+    ).toBe('false');
+
+    // Case 3: Stored viewedId matches configuredId and dismissed -> should be dismissed
+    expect(
+      evaluateScript(scriptWithId, {
+        'docusaurus.announcement.dismiss': 'true',
+        'docusaurus.announcement.id': 'announcement-2',
+      }),
+    ).toBe('true');
+
+    // Case 4: No configuredId but dismissed -> should be dismissed
+    const scriptWithoutId = getAnnouncementBarInlineScript({
+      siteStorage: {
+        type: 'localStorage',
+        namespace: '',
+      },
+    });
+    expect(
+      evaluateScript(scriptWithoutId, {
+        'docusaurus.announcement.dismiss': 'true',
+      }),
+    ).toBe('true');
+  });
 });

packages/docusaurus-theme-classic/src/index.ts

@@ -134,7 +134,7 @@ export default function themeClassic(
             innerHTML: `
 ${getThemeInlineScript({colorMode, siteStorage})}
 ${DataAttributeQueryStringInlineJavaScript}
-${announcementBar ? getAnnouncementBarInlineScript({siteStorage}) : ''}
+${announcementBar ? getAnnouncementBarInlineScript({siteStorage, announcementBar}) : ''}
             `,
           },
         ],

packages/docusaurus-theme-classic/src/inlineScripts.ts

@@ -76,21 +76,30 @@ export const DataAttributeQueryStringInlineJavaScript = `
 // the announcement bar asap (before React hydration)
 export function getAnnouncementBarInlineScript({
   siteStorage,
+  announcementBar,
 }: {
   siteStorage: SiteStorage;
+  announcementBar?: {id?: string};
 }): string {
   // Duplicated constant. Unfortunately we can't import it from theme-common, as
   // we need to support older nodejs versions without ESM support
   // TODO: import from theme-common once we support Node.js with ESM support
   // + move all those announcementBar stuff there too
   const AnnouncementBarDismissStorageKey = `docusaurus.announcement.dismiss${siteStorage.namespace}`;
+  const AnnouncementBarIdStorageKey = `docusaurus.announcement.id${siteStorage.namespace}`;
   const AnnouncementBarDismissDataAttribute =
     'data-announcement-bar-initially-dismissed';
+  const configuredId = announcementBar?.id;
 
   /* language=js */
   return `(function() {
   function isDismissed() {
     try {
+      var configuredId = ${JSON.stringify(configuredId)};
+      var viewedId = localStorage.getItem('${AnnouncementBarIdStorageKey}');
+      if (configuredId && (!viewedId || viewedId !== configuredId)) {
+        return false;
+      }
       return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
     } catch (err) {}
     return false;