Docs: Update announcement bar Dev Day

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10767
GitOrigin-RevId: 6e279d89c6ce2f80d7bd9db48a874ffa1551c1c1

docs/docusaurus.config.js

@@ -173,10 +173,13 @@ const config = {
         // Optional: Algolia search parameters
         // searchParameters: {},
       },
-      // announcementBar: {
-      //   id: 'announcementBar-3', // Increment on change
-      //   content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus" >Twitter</a> ${TwitterSvg}`,
-      // },
+      announcementBar: {
+        id: 'announcementBar-1', // Increment on change
+        content: `Learn all about Hasura DDN and celebrate the launch with us at Dev Day on April 16. <a target="_blank" rel="noopener noreferrer" href="https://hasura.io/dev-day">Sign up here</a>.`,
+        // isCloseable: true,
+        // backgroundColor: '#fafbfc',
+        // textColor: '#091E42',
+      },
       // announcementBar: {
       //   id: 'announcement-bar-3',
       //   content:

docs/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+import { useColorMode } from '@docusaurus/theme-common';
+import AnnouncementBarCloseBtn from '@site/static/icons/x-close.svg';
+import AnnouncementBarCloseBtnDark from '@site/static/icons/x-close-dark.svg'
+import styles from './styles.module.css';
+
+export default function AnnouncementBar() {
+  const {colorMode, setColorMode} = useColorMode();
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const {backgroundColor, textColor, isCloseable} = announcementBar;
+  return (
+    <div className={styles.announcementWrapper}>
+      <div
+        className={styles.announcementBar}
+        style={{backgroundColor, color: textColor}}
+        role="banner">
+        {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+        {isCloseable && (
+          <div
+            onClick={close}
+            className={styles.announcementBarClose}
+          >
+            { colorMode === 'dark' ? <AnnouncementBarCloseBtnDark /> : <AnnouncementBarCloseBtn /> }
+          </div>
+        )}
+        <AnnouncementBarContent className={styles.announcementBarContent} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+.announcementWrapper {
+  background-color: #f3f4f6;
+  padding: 1.5rem;
+}
+
+.announcementBar {
+  display: flex;
+  align-items: center;
+  height: auto;
+  background-color: var(--ifm-color-white);
+  color: var(--ifm-color-black);
+  border: 1px solid transparent;
+  border-radius: 112px;
+  padding: .75rem 1.4rem;
+  /* shadow/default */
+  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.10);
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
+}
+
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
+}
+
+/*.announcementBarClose {*/
+/*  flex: 0 0 30px;*/
+/*  align-self: stretch;*/
+/*  margin-right: 1rem;*/
+/*}*/
+.announcementBarClose {
+  display: flex;
+  align-items: center;
+}
+
+.announcementBarContent {
+  flex: 1 1 auto;
+  color: var(--primary-neutral-600);
+  font-size: .938rem;
+  font-weight: 500;
+  padding: 0;
+}
+
+.announcementBarContent a {
+  color: #1E56E3;
+  text-decoration: none;
+}
+
+@media print {
+  .announcementBar {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+}
+@media (max-width: 900px) {
+  .announcementBar {
+    border-radius: 1rem;
+    position: relative;
+    padding: 1rem;
+  }
+  .announcementBarContent {
+    text-align: left;
+    padding-right: 40px;
+  }
+  .announcementBarClose {
+    position: absolute;
+    right: 1rem;
+    margin-right: 0;
+  }
+  .announcementBarClose svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+[data-theme='dark'] .announcementBar {
+  box-shadow: none;
+  border: 1px solid #333E4B;
+  background-color: #28334F;
+}
+[data-theme='dark'] .announcementBarContent {
+  color: #E5E7EB;
+}
+[data-theme='dark'] .announcementBarContent a {
+  color: #80A3FF;
+}
+[data-theme='dark'] .announcementWrapper {
+  background-color: #1c262f;
+}

docs/src/theme/Navbar/index.js

@@ -4,7 +4,7 @@ import {DDNBanner} from "@site/src/components/BannerDismissable/DDNBanner";
 export default function NavbarWrapper(props) {
   return (
     <>
-      <DDNBanner/>
+      {/*<DDNBanner/>*/}
       <Navbar {...props} />
     </>
   );

docs/static/icons/x-close-dark.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="16" fill="#6C737F"/>
+<path d="M21.7137 10.2856L10.2852 21.7141M10.2852 10.2856L21.7137 21.7141" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

docs/static/icons/x-close.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="16" fill="#F3F4F6"/>
+<path d="M21.7137 10.2856L10.2852 21.7141M10.2852 10.2856L21.7137 21.7141" stroke="#1F2A37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>