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 @@ + + + +