fix(theme-classic): show announcement bar immediately when id changes

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

@@ -3,10 +3,15 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @vitest-environment jsdom
  */
 
-import {describe, expect, it} from 'vitest';
-import {getThemeInlineScript} from '../inlineScripts';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {
+  getThemeInlineScript,
+  getAnnouncementBarInlineScript,
+} from '../inlineScripts';
 
 describe('inlineScripts', () => {
   it('inline javascript for default options', () => {
@@ -40,4 +45,61 @@ describe('inlineScripts', () => {
       }),
     ).toMatchSnapshot();
   });
+
+  describe('getAnnouncementBarInlineScript', () => {
+    beforeEach(() => {
+      localStorage.clear();
+      document.documentElement.removeAttribute(
+        'data-announcement-bar-initially-dismissed',
+      );
+    });
+
+    it('sets attribute to false when not dismissed', () => {
+      const script = getAnnouncementBarInlineScript({
+        siteStorage: {type: 'localStorage', namespace: ''},
+        announcementBar: {id: 'announcement-1'},
+      });
+
+      eval(script);
+      expect(
+        document.documentElement.getAttribute(
+          'data-announcement-bar-initially-dismissed',
+        ),
+      ).toBe('false');
+    });
+
+    it('sets attribute to true when dismissed for the current id', () => {
+      localStorage.setItem('docusaurus.announcement.dismiss', 'true');
+      localStorage.setItem('docusaurus.announcement.id', 'announcement-1');
+
+      const script = getAnnouncementBarInlineScript({
+        siteStorage: {type: 'localStorage', namespace: ''},
+        announcementBar: {id: 'announcement-1'},
+      });
+
+      eval(script);
+      expect(
+        document.documentElement.getAttribute(
+          'data-announcement-bar-initially-dismissed',
+        ),
+      ).toBe('true');
+    });
+
+    it('sets attribute to false when id changed even if previous was dismissed', () => {
+      localStorage.setItem('docusaurus.announcement.dismiss', 'true');
+      localStorage.setItem('docusaurus.announcement.id', 'announcement-1');
+
+      const script = getAnnouncementBarInlineScript({
+        siteStorage: {type: 'localStorage', namespace: ''},
+        announcementBar: {id: 'announcement-2'},
+      });
+
+      eval(script);
+      expect(
+        document.documentElement.getAttribute(
+          'data-announcement-bar-initially-dismissed',
+        ),
+      ).toBe('false');
+    });
+  });
 });

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';
 
   /* language=js */
   return `(function() {
   function isDismissed() {
     try {
+      if (${Boolean(announcementBar?.id)}) {
+        var closedId = localStorage.getItem('${AnnouncementBarIdStorageKey}');
+        if (closedId !== ${JSON.stringify(announcementBar?.id ?? '')}) {
+          return false;
+        }
+      }
       return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
     } catch (err) {}
     return false;

packages/docusaurus-theme-common/src/contexts/announcementBar.tsx

@@ -24,6 +24,8 @@ const AnnouncementBarDismissStorage = createStorageSlot(
   'docusaurus.announcement.dismiss',
 );
 const IdStorage = createStorageSlot('docusaurus.announcement.id');
+const AnnouncementBarDismissDataAttribute =
+  'data-announcement-bar-initially-dismissed';
 
 const isDismissedInStorage = () =>
   AnnouncementBarDismissStorage.get() === 'true';
@@ -78,6 +80,10 @@ function useContextValue(): ContextValue {
     }
 
     if (isNewAnnouncement || !isDismissedInStorage()) {
+      document.documentElement.setAttribute(
+        AnnouncementBarDismissDataAttribute,
+        'false',
+      );
       setClosed(false);
     }
   }, [announcementBar]);