mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-09-11 10:46:25 +03:00
Docs: Update announcement bar Dev Day
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10767 GitOrigin-RevId: 6e279d89c6ce2f80d7bd9db48a874ffa1551c1c1
This commit is contained in:
parent
9b8915b5b5
commit
dc538aae5f
@ -173,10 +173,13 @@ const config = {
|
|||||||
// Optional: Algolia search parameters
|
// Optional: Algolia search parameters
|
||||||
// searchParameters: {},
|
// searchParameters: {},
|
||||||
},
|
},
|
||||||
// announcementBar: {
|
announcementBar: {
|
||||||
// id: 'announcementBar-3', // Increment on change
|
id: 'announcementBar-1', // 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}`,
|
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: {
|
// announcementBar: {
|
||||||
// id: 'announcement-bar-3',
|
// id: 'announcement-bar-3',
|
||||||
// content:
|
// content:
|
||||||
|
37
docs/src/theme/AnnouncementBar/index.js
Normal file
37
docs/src/theme/AnnouncementBar/index.js
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
108
docs/src/theme/AnnouncementBar/styles.module.css
Normal file
108
docs/src/theme/AnnouncementBar/styles.module.css
Normal file
@ -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;
|
||||||
|
}
|
@ -4,7 +4,7 @@ import {DDNBanner} from "@site/src/components/BannerDismissable/DDNBanner";
|
|||||||
export default function NavbarWrapper(props) {
|
export default function NavbarWrapper(props) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DDNBanner/>
|
{/*<DDNBanner/>*/}
|
||||||
<Navbar {...props} />
|
<Navbar {...props} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
4
docs/static/icons/x-close-dark.svg
vendored
Normal file
4
docs/static/icons/x-close-dark.svg
vendored
Normal file
@ -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>
|
After Width: | Height: | Size: 315 B |
4
docs/static/icons/x-close.svg
vendored
Normal file
4
docs/static/icons/x-close.svg
vendored
Normal file
@ -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>
|
After Width: | Height: | Size: 315 B |
Loading…
Reference in New Issue
Block a user