mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-10-26 10:20:54 +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
|
||||
// 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:
|
||||
|
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) {
|
||||
return (
|
||||
<>
|
||||
<DDNBanner/>
|
||||
{/*<DDNBanner/>*/}
|
||||
<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