From dc538aae5f73f821ecc455dedb069772d3e4df7f Mon Sep 17 00:00:00 2001
From: Sean Park-Ross <94021366+seanparkross@users.noreply.github.com>
Date: Mon, 8 Apr 2024 14:03:19 +0100
Subject: [PATCH] Docs: Update announcement bar Dev Day
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10767
GitOrigin-RevId: 6e279d89c6ce2f80d7bd9db48a874ffa1551c1c1
---
docs/docusaurus.config.js | 11 +-
docs/src/theme/AnnouncementBar/index.js | 37 ++++++
.../theme/AnnouncementBar/styles.module.css | 108 ++++++++++++++++++
docs/src/theme/Navbar/index.js | 2 +-
docs/static/icons/x-close-dark.svg | 4 +
docs/static/icons/x-close.svg | 4 +
6 files changed, 161 insertions(+), 5 deletions(-)
create mode 100644 docs/src/theme/AnnouncementBar/index.js
create mode 100644 docs/src/theme/AnnouncementBar/styles.module.css
create mode 100644 docs/static/icons/x-close-dark.svg
create mode 100644 docs/static/icons/x-close.svg
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 079cf36caf7..b3c3eca7886 100644
--- a/docs/docusaurus.config.js
+++ b/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 GitHub and follow us on Twitter ${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. Sign up here.`,
+ // isCloseable: true,
+ // backgroundColor: '#fafbfc',
+ // textColor: '#091E42',
+ },
// announcementBar: {
// id: 'announcement-bar-3',
// content:
diff --git a/docs/src/theme/AnnouncementBar/index.js b/docs/src/theme/AnnouncementBar/index.js
new file mode 100644
index 00000000000..723d10620f1
--- /dev/null
+++ b/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 (
+
+
+ {isCloseable &&
}
+ {isCloseable && (
+
+ { colorMode === 'dark' ?
:
}
+
+ )}
+
+
+
+ );
+}
diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css
new file mode 100644
index 00000000000..d3d90fa92b6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 53e58f83bdb..40569601012 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -4,7 +4,7 @@ import {DDNBanner} from "@site/src/components/BannerDismissable/DDNBanner";
export default function NavbarWrapper(props) {
return (
<>
-
+ {/**/}
>
);
diff --git a/docs/static/icons/x-close-dark.svg b/docs/static/icons/x-close-dark.svg
new file mode 100644
index 00000000000..d99ecb859d9
--- /dev/null
+++ b/docs/static/icons/x-close-dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/docs/static/icons/x-close.svg b/docs/static/icons/x-close.svg
new file mode 100644
index 00000000000..fe01cbd0771
--- /dev/null
+++ b/docs/static/icons/x-close.svg
@@ -0,0 +1,4 @@
+