docs: preview banner

apify-docs-theme/src/config.js

@@ -285,6 +285,34 @@ const themeConfig = {
         async: true,
         defer: true,
     },
+    announcementBar: process.env.APIFY_DOCS_ABSOLUTE_URL
+        ? (() => {
+              const absoluteUrl = new URL(process.env.APIFY_DOCS_ABSOLUTE_URL);
+
+              const { hostname } = absoluteUrl;
+
+              if (!hostname.includes('pr-') && !hostname.includes('preview')) {
+                  return undefined;
+              }
+
+              const prNumber = hostname.split('.')[0]?.split('-')[1];
+
+              if (!prNumber) {
+                  return undefined;
+              }
+
+              // TODO: once we support multiple preview deployments, we should pass in the repository name as an env variable
+              const githubUrl = `https://github.com/apify/apify-docs/pull/${prNumber}`;
+
+              return {
+                  id: 'apify-docs-preview-banner',
+                  content: `You are visiting <a href="${githubUrl}" target="_blank">a preview build for PR ${prNumber}</a> of the Apify Docs.`,
+                  backgroundColor: '#B80F0A',
+                  textColor: '#FFFFFF',
+                  isCloseable: false,
+              };
+          })()
+        : undefined,
 };
 
 const plugins = [

apify-docs-theme/src/theme/custom.css

@@ -967,6 +967,20 @@ nav.navbar[class*='navbarHidden'] {
     transform: translate3d(0, calc(-210%), 0);
 }
 
+/* Pin the announcement bar to the top of the viewport and push the
+   navbar down so it sits below the bar instead of sliding under it.
+   The sibling selector keeps the navbar at top: 0 when there is no
+   announcement bar (e.g. production builds). */
+div[class*='announcementBar_'] {
+    position: sticky;
+    top: 0;
+    z-index: calc(var(--ifm-z-index-fixed) + 1);
+}
+
+div[class*='announcementBar_'] ~ nav.navbar {
+    top: var(--docusaurus-announcement-bar-height);
+}
+
 .navbar__items--right a.icon,
 div[class*='colorModeToggle'] {
     display: initial;