feat(Docs): Add topbar banner

docs/docusaurus.config.js

@@ -1,9 +1,28 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
+import { topbarBannerReservationScript } from '@swmansion/t-rex-ui/topbar-banner'; 
+import { TOP_BAR_BANNER } from './src/components/topbarBanner.config.ts'; 
+
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
 
+
+const firstBannerZone = TOP_BAR_BANNER.zones[0];
+const bannerReservationHeadTags = firstBannerZone
+  ? [
+      {
+        tagName: 'script',
+        attributes: { type: 'text/javascript' },
+        innerHTML: topbarBannerReservationScript(
+          firstBannerZone.zoneId,
+          firstBannerZone.contentId,
+          TOP_BAR_BANNER.hiddenPaths,
+        ),
+      },
+    ]
+  : [];
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'React Native Enriched HTML',
@@ -64,6 +83,10 @@ const config = {
     require.resolve('@swmansion/t-rex-ui/preset'),
   ],
 
+  headTags: bannerReservationHeadTags,
+
+  clientModules: [require.resolve('./src/clientModules/topbarBannerRefresh.ts')],
+
   plugins: [
     function transpileTRexUiTheme() {
       return {
@@ -84,13 +107,12 @@ const config = {
         },
       };
     },
-    // TODO: enable Google Tag Manager with a container id for this site.
-    // process.env.NODE_ENV === 'production' && [
-    //   '@docusaurus/plugin-google-tag-manager',
-    //   {
-    //     containerId: 'GTM-XXXXXXX',
-    //   },
-    // ],
+    process.env.NODE_ENV === 'production' && [
+      '@docusaurus/plugin-google-tag-manager',
+      {
+        containerId: 'GTM-N5QK8TMT',
+      },
+    ],
   ].filter(Boolean),
 
   themeConfig:

docs/package.json

@@ -27,7 +27,7 @@
     "@emotion/styled": "^11.14.0",
     "@mdx-js/react": "^3.0.0",
     "@mui/material": "^7.1.0",
-    "@swmansion/t-rex-ui": "1.3.2",
+    "@swmansion/t-rex-ui": "1.3.4",
     "clsx": "^2.1.0",
     "copy-text-to-clipboard": "3.2.2",
     "prettier": "^3.6.2",

docs/src/clientModules/topbarBannerRefresh.ts

@@ -0,0 +1,25 @@
+import type { ClientModule } from '@docusaurus/types';
+import type { BannerZone } from '@swmansion/t-rex-ui';
+import { TOP_BAR_BANNER } from '../components/topbarBanner.config';
+
+// Revive's async tag only scans <ins> slots once, on initial load; re-trigger it after each SPA nav so remounted slots get filled.
+const contentIds = Array.from(
+  new Set(TOP_BAR_BANNER.zones.map((zone: BannerZone) => zone.contentId)),
+);
+
+function refreshBannerContent() {
+  contentIds.forEach((contentId) => {
+    document.dispatchEvent(new CustomEvent(`content-${contentId}-refresh`));
+  });
+}
+
+export const onRouteDidUpdate: ClientModule['onRouteDidUpdate'] = ({
+  previousLocation,
+  location,
+}) => {
+  if (!previousLocation || previousLocation.pathname === location.pathname) {
+    return;
+  }
+  // Defer until after the new route's <ins> nodes are actually in the DOM.
+  setTimeout(refreshBannerContent, 0);
+};

docs/src/components/topbarBanner.config.ts

@@ -0,0 +1,21 @@
+
+export const TOP_BAR_BANNER = {
+  rotateIntervalMs: 4000,
+  zones: [
+    {
+      zoneId: 'enriched-topbar-1',
+      contentId: 'ea15c4216158c4097b65fe6504a4b3b7',
+      fallbackBgColor: '#001a72',
+    },
+    {
+      zoneId: 'enriched-topbar-2',
+      contentId: 'ea15c4216158c4097b65fe6504a4b3b7',
+      fallbackBgColor: '#001a72',
+    },
+    {
+      zoneId: 'enriched-topbar-3',
+      contentId: 'ea15c4216158c4097b65fe6504a4b3b7',
+      fallbackBgColor: '#001a72',
+    },
+  ] satisfies BannerZone[],
+};

docs/src/theme/Navbar/index.js

@@ -1,11 +1,22 @@
 import React from 'react';
-import { Navbar } from '@swmansion/t-rex-ui';
-import TopPromoRotator from '@site/src/components/TopPromoRotator';
+import { useLocation } from '@docusaurus/router';
+import { Navbar, TopbarBanner, isBannerHidden } from '@swmansion/t-rex-ui';
+import { TOP_BAR_BANNER } from '@site/src/components/topbarBanner.config';
 
 export default function NavbarWrapper(props) {
+  const location = useLocation();
+  const bannerHidden = isBannerHidden(
+    location.pathname,
+    TOP_BAR_BANNER.hiddenPaths,
+  );
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
-      <TopPromoRotator />
+       {!bannerHidden && (
+        <TopbarBanner
+          zones={TOP_BAR_BANNER.zones}
+          rotateIntervalMs={TOP_BAR_BANNER.rotateIntervalMs}
+        />
+      )}
       <Navbar
         useLandingLogoDualVariant={true}
         isAlgoliaActive={false}

docs/yarn.lock

@@ -3925,9 +3925,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swmansion/t-rex-ui@npm:1.3.2":
-  version: 1.3.2
-  resolution: "@swmansion/t-rex-ui@npm:1.3.2"
+"@swmansion/t-rex-ui@npm:1.3.4":
+  version: 1.3.4
+  resolution: "@swmansion/t-rex-ui@npm:1.3.4"
   dependencies:
     "@docusaurus/core": "npm:3.9.2"
     "@docusaurus/module-type-aliases": "npm:3.9.2"
@@ -3948,10 +3948,11 @@ __metadata:
     "@emotion/styled": "*"
     "@mui/material": ">=5.0.0"
     copy-text-to-clipboard: ^3.2.2
+    prism-react-renderer: ^2.0.0
     react: "*"
     react-dom: "*"
     react-icons: "*"
-  checksum: 10c0/8e88ca4efbc892b01cea5e07f6b46332f32c04008685c7083f52a8f9b0c269f74e6afa2ba5458aae106fcd1ea746a22176f8ec13f5e3823d5405e651e94438ec
+  checksum: 10c0/64adad0bcce8856d1855e2da153af9429c8a6ae759fb510933163e523db83a70eeceded9d8e50d108f269f7129f143b5f401509aa3ab0331f5fd14eea3295d66
   languageName: node
   linkType: hard
 
@@ -6976,7 +6977,7 @@ __metadata:
     "@emotion/styled": "npm:^11.14.0"
     "@mdx-js/react": "npm:^3.0.0"
     "@mui/material": "npm:^7.1.0"
-    "@swmansion/t-rex-ui": "npm:1.3.2"
+    "@swmansion/t-rex-ui": "npm:1.3.4"
     clsx: "npm:^2.1.0"
     copy-text-to-clipboard: "npm:3.2.2"
     prettier: "npm:^3.6.2"