feat: add Testkube Cloud announcement in docs

docs/docusaurus.config.js

@@ -100,6 +100,13 @@ const config = {
         ],
       },
 
+      announcementBar: {
+        id: "join-testkube-cloud",
+        content: '<strong>New to Testkube?</strong> Unleash the power of cloud native testing in Kubernetes with Testkube. <a id="sign_cloud_docs" href="https://cloud.testkube.io/?utm_source=docs" target="_blank">Get Started ></a>',
+        backgroundColor: "#8951ff",
+        textColor: "#fff",
+      },
+
       footer: {
         style: "dark",
         links: [

docs/src/css/custom.css

@@ -366,3 +366,10 @@ ul:hover {
     font-size: 2rem !important;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .DocSearch-Button {
+    width: 36px;
+    min-width: 36px;
+  }
+}

docs/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,5 @@
+export default function AnnouncementBarWrapper() {
+  // The new announcement bar is below the navigation bar
+  // @see {@link ../Navbar/index.js}
+  return null;
+}

docs/src/theme/Navbar/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Navbar from "@theme-original/Navbar";
+import {useThemeConfig} from "@docusaurus/theme-common";
+import {useAnnouncementBar, useNavbarMobileSidebar} from "@docusaurus/theme-common/internal";
+
+import styles from "./styles.module.css";
+
+export default function NavbarWrapper() {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  if (!isActive) {
+    return <Navbar />;
+  }
+
+  return (
+    <>
+      <Navbar />
+      <div
+        id={announcementBar.id}
+        className={styles.announcement}
+        style={{
+          '--announcementBar-color': announcementBar.textColor,
+          '--announcementBar-background': announcementBar.backgroundColor,
+        }}
+        aria-disabled={mobileSidebar.shown}
+      >
+        <div className={styles.announcementContent} dangerouslySetInnerHTML={{__html: announcementBar.content}} />
+        {announcementBar.isCloseable ? <button className={styles.announcementClose} onClick={close}>&times;</button> : null}
+      </div>
+    </>
+  );
+}

docs/src/theme/Navbar/styles.module.css

@@ -0,0 +1,58 @@
+.announcement {
+  --announcementBar-background: #fff;
+  --announcementBar-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  z-index: var(--ifm-z-index-fixed);
+  padding: 10px 20px;
+  text-align: center;
+  font-size: 14px;
+  background: var(--announcementBar-background);
+  color: var(--announcementBar-color);
+}
+
+.announcement[aria-disabled=true] {
+  z-index: 0;
+}
+
+.announcement a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.announcement a:hover,
+.announcement a:focus {
+  text-decoration: none;
+}
+
+.announcementContent {
+  margin: 0 auto;
+}
+
+.announcementClose {
+  cursor: pointer;
+  display: block;
+  appearance: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 1.5em;
+  line-height: 1em;
+  width: 1em;
+  min-width: 1em;
+  border-radius: 50%;
+  text-align: center;
+}
+
+.announcementClose:hover,
+.announcementClose:focus {
+  background: var(--announcementBar-color);
+  color: var(--announcementBar-background);
+}