Add scoped EPP Navigator announcement bar to Endpoint Protector docs

[derek-netwrix]

Summary

• Adds an announcement bar promoting EPP Navigator (AI guide built on the docs), shown only under /docs/endpointprotector and its subpages.
• Swizzles AnnouncementBar as a wrapper (src/theme/AnnouncementBar/index.js); add paths to ANNOUNCEMENT_SCOPES to scope it to other sections.
• Bar is pinned on desktop (≥997px); navbar, sidebar, TOC and anchor offsets apply only while the bar is showing. On mobile it scrolls away.
• Styling in src/css/custom.css: brand purple #5851DB, white text, larger type, Hubot Sans bold lead-in, external-link icon, no underline except on hover, white dismiss button.
• Whole message links to the EPP Navigator conversation (opens in a new tab).

Notes

• The link goes to the Community site; the bar says "(Community account required)". Worth confirming the link needs a login before merge.
• Dismissal is remembered per announcementBar.id; change the id to re-show a new message.
• Tested locally with the full-site dev server (npm run start).

Generated with AI

Co-Authored-By: Claude Code ai@netwrix.com

[github-actions]

Code Review

No blocking issues. The config change is valid themeConfig and doesn't touch routing, products.js, sidebars, or the KB pipeline. The content HTML is static and comes from config, so dangerouslySetInnerHTML is not an injection risk, and target="_blank" carries rel="noopener noreferrer". The wrapper uses useLocation and returns the same result on the server and the client, so there's no hydration mismatch on pages outside the scope.

A few minor things worth a look:

1. Extra gap at the bottom of the sidebar on every other product (desktop). The stock DocSidebar/Desktop/Content decides whether to add the menuWithAnnouncementBar class (margin-bottom: var(--docusaurus-announcement-bar-height)) by calling useAnnouncementBar().isActive. That check knows nothing about the path scope. On every non-EPP docs page where the user hasn't dismissed the bar, isActive is true, so the sidebar menu gets roughly 30px of bottom margin (the theme's default desktop height) even though no bar is rendered. It's cosmetic, but it affects the whole site. One fix is a CSS override, e.g. html:not([data-has-announcement-bar]) [class*='menuWithAnnouncementBar_'] { margin-bottom: 0; }.

2. Layout shift on first load of EPP pages (desktop). data-has-announcement-bar is set in useEffect, so it doesn't exist in the SSR HTML. Until hydration, the bar isn't sticky, --docusaurus-announcement-bar-height is still the theme default rather than 64px, and the navbar, sidebar and TOC offsets don't apply. Once hydration runs, everything jumps into place. This is acceptable, but if it's noticeable, an inline head script that sets the attribute when location.pathname starts with /docs/endpointprotector and the bar isn't dismissed would avoid it.

3. <use href="#theme-svg-external-link"> depends on a theme-internal sprite. The icon only renders if Docusaurus has already emitted that <symbol> on the page, which depends on the theme version and isn't a public API. If a Docusaurus upgrade renames or removes it, the icon silently disappears. Inlining the SVG path in content would avoid that dependency. A smaller a11y note: aria-label on an <svg> without role="img" isn't reliably announced.

4. Fragile selectors. [class*='sidebarViewport_'], [class*='tableOfContents_'], [class*='anchorWithStickyNavbar_'] and [class*='closeButton'] match CSS-module hash prefixes. They work today but could break silently on a theme upgrade. Note this rather than change it.

z-index: the sticky bar (--ifm-z-index-fixed + 1) matches .DocSearch-Container. DocSearch portals its modal to the end of <body>, so the search modal still paints above the bar. No conflict.