diff --git a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap index 2cee3bc7aa98..f649d028e4b3 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap +++ b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap @@ -1,5 +1,48 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`inlineScripts > getAnnouncementBarInlineScript > generates inline script with announcement bar id check 1`] = ` +"(function() { + function isDismissed() { + try { + if (localStorage.getItem('docusaurus.announcement.id') !== "announcement-2") { + return false; + } + return localStorage.getItem('docusaurus.announcement.dismiss') === 'true'; + } catch (err) {} + return false; + } + document.documentElement.setAttribute('data-announcement-bar-initially-dismissed', isDismissed()); +})();" +`; + +exports[`inlineScripts > getAnnouncementBarInlineScript > generates inline script with storage namespace 1`] = ` +"(function() { + function isDismissed() { + try { + if (localStorage.getItem('docusaurus.announcement.id.subpath') !== "announcement-1") { + return false; + } + return localStorage.getItem('docusaurus.announcement.dismiss.subpath') === 'true'; + } catch (err) {} + return false; + } + document.documentElement.setAttribute('data-announcement-bar-initially-dismissed', isDismissed()); +})();" +`; + +exports[`inlineScripts > getAnnouncementBarInlineScript > generates inline script without announcementBar 1`] = ` +"(function() { + function isDismissed() { + try { + + return localStorage.getItem('docusaurus.announcement.dismiss') === 'true'; + } catch (err) {} + return false; + } + document.documentElement.setAttribute('data-announcement-bar-initially-dismissed', isDismissed()); +})();" +`; + exports[`inlineScripts > inline javascript for default mode and no switch 1`] = ` "(function() { function getSystemColorMode() { diff --git a/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts b/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts index 2690e0b09c89..c8f96ff7b007 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts +++ b/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts @@ -6,7 +6,10 @@ */ import {describe, expect, it} from 'vitest'; -import {getThemeInlineScript} from '../inlineScripts'; +import { + getAnnouncementBarInlineScript, + getThemeInlineScript, +} from '../inlineScripts'; describe('inlineScripts', () => { it('inline javascript for default options', () => { @@ -40,4 +43,53 @@ describe('inlineScripts', () => { }), ).toMatchSnapshot(); }); + + describe('getAnnouncementBarInlineScript', () => { + it('generates inline script with announcement bar id check', () => { + expect( + getAnnouncementBarInlineScript({ + siteStorage: { + type: 'localStorage', + namespace: '', + }, + announcementBar: { + id: 'announcement-2', + content: 'Hello', + isCloseable: true, + backgroundColor: '#000', + textColor: '#fff', + }, + }), + ).toMatchSnapshot(); + }); + + it('generates inline script with storage namespace', () => { + expect( + getAnnouncementBarInlineScript({ + siteStorage: { + type: 'localStorage', + namespace: '.subpath', + }, + announcementBar: { + id: 'announcement-1', + content: 'Hello', + isCloseable: true, + backgroundColor: '#000', + textColor: '#fff', + }, + }), + ).toMatchSnapshot(); + }); + + it('generates inline script without announcementBar', () => { + expect( + getAnnouncementBarInlineScript({ + siteStorage: { + type: 'localStorage', + namespace: '', + }, + }), + ).toMatchSnapshot(); + }); + }); }); diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts index 8c5a236835a3..b57e3bf69eb1 100644 --- a/packages/docusaurus-theme-classic/src/index.ts +++ b/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}) : ''} `, }, ], diff --git a/packages/docusaurus-theme-classic/src/inlineScripts.ts b/packages/docusaurus-theme-classic/src/inlineScripts.ts index fe49094a52c4..54b8263d5ec2 100644 --- a/packages/docusaurus-theme-classic/src/inlineScripts.ts +++ b/packages/docusaurus-theme-classic/src/inlineScripts.ts @@ -76,21 +76,34 @@ export const DataAttributeQueryStringInlineJavaScript = ` // the announcement bar asap (before React hydration) export function getAnnouncementBarInlineScript({ siteStorage, + announcementBar, }: { siteStorage: SiteStorage; + announcementBar?: ThemeConfig['announcementBar']; }): 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 announcementBarId = announcementBar?.id; /* language=js */ return `(function() { function isDismissed() { try { + ${ + announcementBarId + ? `if (localStorage.getItem('${AnnouncementBarIdStorageKey}') !== ${JSON.stringify( + announcementBarId, + )}) { + return false; + }` + : '' + } return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true'; } catch (err) {} return false;