STRLCPY/graphql-engine

■ ■ ■ ■ ■ ■

docs/docusaurus.config.js

		skipped 172 lines
173	173		// Optional: Algolia search parameters
174	174		// searchParameters: {},
175	175		},
176		-	// announcementBar: {
177		-	// id: 'announcementBar-3', // Increment on change
178		-	// 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}`,
179		-	// },
	176	+	announcementBar: {
	177	+	id: 'announcementBar-1', // Increment on change
	178	+	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>.`,
	179	+	// isCloseable: true,
	180	+	// backgroundColor: '#fafbfc',
	181	+	// textColor: '#091E42',
	182	+	},
180	183		// announcementBar: {
181	184		// id: 'announcement-bar-3',
182	185		// content:
		skipped 96 lines

■ ■ ■ ■ ■ ■

docs/src/theme/AnnouncementBar/index.js

1	+	import React from 'react';
2	+	import {useThemeConfig} from '@docusaurus/theme-common';
3	+	import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
4	+	import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
5	+	import { useColorMode } from '@docusaurus/theme-common';
6	+	import AnnouncementBarCloseBtn from '@site/static/icons/x-close.svg';
7	+	import AnnouncementBarCloseBtnDark from '@site/static/icons/x-close-dark.svg'
8	+	import styles from './styles.module.css';
9	+
10	+	export default function AnnouncementBar() {
11	+	const {colorMode, setColorMode} = useColorMode();
12	+	const {announcementBar} = useThemeConfig();
13	+	const {isActive, close} = useAnnouncementBar();
14	+	if (!isActive) {
15	+	return null;
16	+	}
17	+	const {backgroundColor, textColor, isCloseable} = announcementBar;
18	+	return (
19	+	<div className={styles.announcementWrapper}>
20	+	<div
21	+	className={styles.announcementBar}
22	+	style={{backgroundColor, color: textColor}}
23	+	role="banner">
24	+	{isCloseable && <div className={styles.announcementBarPlaceholder} />}
25	+	{isCloseable && (
26	+	<div
27	+	onClick={close}
28	+	className={styles.announcementBarClose}
29	+	>
30	+	{ colorMode === 'dark' ? <AnnouncementBarCloseBtnDark /> : <AnnouncementBarCloseBtn /> }
31	+	</div>
32	+	)}
33	+	<AnnouncementBarContent className={styles.announcementBarContent} />
34	+	</div>
35	+	</div>
36	+	);
37	+	}
38	+

■ ■ ■ ■ ■ ■

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

1	+	:root {
2	+	--docusaurus-announcement-bar-height: auto;
3	+	}
4	+
5	+	.announcementWrapper {
6	+	background-color: #f3f4f6;
7	+	padding: 1.5rem;
8	+	}
9	+
10	+	.announcementBar {
11	+	display: flex;
12	+	align-items: center;
13	+	height: auto;
14	+	background-color: var(--ifm-color-white);
15	+	color: var(--ifm-color-black);
16	+	border: 1px solid transparent;
17	+	border-radius: 112px;
18	+	padding: .75rem 1.4rem;
19	+	/* shadow/default */
20	+	box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.10);
21	+	/*
22	+	Unfortunately we can't make announcement bar render above the navbar
23	+	IE need to use border-bottom instead of shadow
24	+	See https://github.com/facebookincubator/infima/issues/275
25	+
26	+	box-shadow: var(--ifm-global-shadow-lw);
27	+	z-index: calc(var(--ifm-z-index-fixed) + 1);
28	+	*/
29	+	border-bottom: 1px solid var(--ifm-color-emphasis-100);
30	+	}
31	+
32	+	html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
33	+	display: none;
34	+	}
35	+
36	+	.announcementBarPlaceholder {
37	+	flex: 0 0 10px;
38	+	}
39	+
40	+	/.announcementBarClose {/
41	+	/* flex: 0 0 30px;*/
42	+	/* align-self: stretch;*/
43	+	/* margin-right: 1rem;*/
44	+	/}/
45	+	.announcementBarClose {
46	+	display: flex;
47	+	align-items: center;
48	+	}
49	+
50	+	.announcementBarContent {
51	+	flex: 1 1 auto;
52	+	color: var(--primary-neutral-600);
53	+	font-size: .938rem;
54	+	font-weight: 500;
55	+	padding: 0;
56	+	}
57	+
58	+	.announcementBarContent a {
59	+	color: #1E56E3;
60	+	text-decoration: none;
61	+	}
62	+
63	+	@media print {
64	+	.announcementBar {
65	+	display: none;
66	+	}
67	+	}
68	+
69	+	@media (min-width: 997px) {
70	+	:root {
71	+	--docusaurus-announcement-bar-height: 30px;
72	+	}
73	+	}
74	+	@media (max-width: 900px) {
75	+	.announcementBar {
76	+	border-radius: 1rem;
77	+	position: relative;
78	+	padding: 1rem;
79	+	}
80	+	.announcementBarContent {
81	+	text-align: left;
82	+	padding-right: 40px;
83	+	}
84	+	.announcementBarClose {
85	+	position: absolute;
86	+	right: 1rem;
87	+	margin-right: 0;
88	+	}
89	+	.announcementBarClose svg {
90	+	width: 1.5rem;
91	+	height: 1.5rem;
92	+	}
93	+	}
94	+
95	+	[data-theme='dark'] .announcementBar {
96	+	box-shadow: none;
97	+	border: 1px solid #333E4B;
98	+	background-color: #28334F;
99	+	}
100	+	[data-theme='dark'] .announcementBarContent {
101	+	color: #E5E7EB;
102	+	}
103	+	[data-theme='dark'] .announcementBarContent a {
104	+	color: #80A3FF;
105	+	}
106	+	[data-theme='dark'] .announcementWrapper {
107	+	background-color: #1c262f;
108	+	}

■ ■ ■ ■ ■ ■

docs/src/theme/Navbar/index.js

		skipped 3 lines
4	4		export default function NavbarWrapper(props) {
5	5		return (
6	6		<>
7		-	<DDNBanner/>
	7	+	{/<DDNBanner/>/}
8	8		<Navbar {...props} />
9	9		</>
10	10		);
		skipped 2 lines

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

docs/static/icons/x-close.svg

Docs: Update announcement bar Dev Day