From 7997c33678a9a2312116f72227ddbcebd5ddb55a Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 13:50:02 +0100 Subject: [PATCH 1/7] docs: draft appjs banner --- docs/docusaurus.config.js | 9 ++ .../AnnouncementBar/CloseButton/index.jsx | 20 ++++ .../CloseButton/styles.module.css | 9 ++ .../theme/AnnouncementBar/Content/index.jsx | 17 +++ .../AnnouncementBar/Content/styles.module.css | 10 ++ docs/src/theme/AnnouncementBar/index.jsx | 44 ++++++++ .../theme/AnnouncementBar/styles.module.css | 70 ++++++++++++ docs/static/img/particles.svg | 100 ++++++++++++++++++ 8 files changed, 279 insertions(+) create mode 100644 docs/src/theme/AnnouncementBar/CloseButton/index.jsx create mode 100644 docs/src/theme/AnnouncementBar/CloseButton/styles.module.css create mode 100644 docs/src/theme/AnnouncementBar/Content/index.jsx create mode 100644 docs/src/theme/AnnouncementBar/Content/styles.module.css create mode 100644 docs/src/theme/AnnouncementBar/index.jsx create mode 100644 docs/src/theme/AnnouncementBar/styles.module.css create mode 100644 docs/static/img/particles.svg diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 17fe39ff9ca..84ef80b31b6 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -125,6 +125,15 @@ module.exports = { prism: { theme: prismConfig, }, + announcementBar: { + id: 'appjs_announcement', + content: ` + We're organizing app.js - a React Native & Expo-focused conference + Learn more + `, + backgroundColor: '#0033CC', + textColor: '#FFFFFF', + }, }, presets: [ [ diff --git a/docs/src/theme/AnnouncementBar/CloseButton/index.jsx b/docs/src/theme/AnnouncementBar/CloseButton/index.jsx new file mode 100644 index 00000000000..75474929e4b --- /dev/null +++ b/docs/src/theme/AnnouncementBar/CloseButton/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import clsx from 'clsx'; +import { translate } from '@docusaurus/Translate'; +import IconClose from '@theme/Icon/Close'; +import styles from './styles.module.css'; +export default function AnnouncementBarCloseButton(props) { + return ( + + ); +} diff --git a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css new file mode 100644 index 00000000000..207a76970e5 --- /dev/null +++ b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -0,0 +1,9 @@ +.closeButton { + padding: 0; + line-height: 0; + opacity: 1; +} + +.closeButton svg { + color: white; +} diff --git a/docs/src/theme/AnnouncementBar/Content/index.jsx b/docs/src/theme/AnnouncementBar/Content/index.jsx new file mode 100644 index 00000000000..a7a8b61b4cd --- /dev/null +++ b/docs/src/theme/AnnouncementBar/Content/index.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import styles from './styles.module.css'; +export default function AnnouncementBarContent(props) { + const {announcementBar} = useThemeConfig(); + const {content} = announcementBar; + return ( +
+ ); +} diff --git a/docs/src/theme/AnnouncementBar/Content/styles.module.css b/docs/src/theme/AnnouncementBar/Content/styles.module.css new file mode 100644 index 00000000000..16635d4b7dd --- /dev/null +++ b/docs/src/theme/AnnouncementBar/Content/styles.module.css @@ -0,0 +1,10 @@ +.content { + font-size: 85%; + text-align: center; + padding: 5px 0; +} + +.content a { + color: inherit; + text-decoration: underline; +} diff --git a/docs/src/theme/AnnouncementBar/index.jsx b/docs/src/theme/AnnouncementBar/index.jsx new file mode 100644 index 00000000000..d0015f96feb --- /dev/null +++ b/docs/src/theme/AnnouncementBar/index.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import { useAnnouncementBar } from '@docusaurus/theme-common/internal'; +import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton'; +import AnnouncementBarContent from '@theme/AnnouncementBar/Content'; +import styles from './styles.module.css'; + +const particles = 'img/particles.svg'; + +export default function AnnouncementBar() { + const { announcementBar } = useThemeConfig(); + const { isActive, close } = useAnnouncementBar(); + if (!isActive) { + return null; + } + const { backgroundColor, textColor, isCloseable } = announcementBar; + + return ( +
+ + {isCloseable &&
} + + {isCloseable && ( + + )} + +
+ ); +} diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css new file mode 100644 index 00000000000..e80af139914 --- /dev/null +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -0,0 +1,70 @@ +:root { + --docusaurus-announcement-bar-height: 64px; + --docusaurus-announcement-bar-font-size: 24px; + --docusaurus-announcement-bar-link-font-size: 20px; +} + +.announcementBar { + display: flex; + align-items: center; + height: var(--docusaurus-announcement-bar-height); + font-size: var(--docusaurus-announcement-bar-font-size); + background-color: var(--ifm-color-white); + color: var(--ifm-color-black); + position: relative; + overflow: hidden; +} + +.announcementBarAdornment { + height: 500px; + width: 500px; + position: absolute; + opacity: 0.3; +} +.announcementBarLeftAdornment { + left: -125px; + top: -150px; +} + +.announcementBarRightAdornment { + right: -200px; + top: -100px; +} + +.announcementBar a { + font-size: var(--docusaurus-announcement-bar-link-font-size); +} + +html[data-announcement-bar-initially-dismissed='true'] .announcementBar { + display: none; +} + +.announcementBarPlaceholder { + flex: 0 0 10px; +} + +.announcementBarClose { + flex: 0 0 30px; + align-self: stretch; +} + +.announcementBarContent { + flex: 1 1 auto; +} + +@media print { + .announcementBar { + display: none; + } +} + +@media (min-width: 997px) { + :root { + --docusaurus-announcement-bar-height: 60px; + } + + .announcementBarPlaceholder, + .announcementBarClose { + flex-basis: 50px; + } +} diff --git a/docs/static/img/particles.svg b/docs/static/img/particles.svg new file mode 100644 index 00000000000..ece09991b47 --- /dev/null +++ b/docs/static/img/particles.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 8ffc2edf8e75c185384aef72bbb702c3d1fe618a Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 14:51:53 +0100 Subject: [PATCH 2/7] docs: make imgs not draggable --- docs/src/theme/AnnouncementBar/CloseButton/styles.module.css | 1 + docs/src/theme/AnnouncementBar/styles.module.css | 2 ++ 2 files changed, 3 insertions(+) diff --git a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css index 207a76970e5..faa61b11799 100644 --- a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css +++ b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -2,6 +2,7 @@ padding: 0; line-height: 0; opacity: 1; + z-index: 1; } .closeButton svg { diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css index e80af139914..a7106020641 100644 --- a/docs/src/theme/AnnouncementBar/styles.module.css +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -20,7 +20,9 @@ width: 500px; position: absolute; opacity: 0.3; + pointer-events: none; } + .announcementBarLeftAdornment { left: -125px; top: -150px; From 114b621f155353d9fb822e1ece82c58ce101ecd4 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 18:22:41 +0100 Subject: [PATCH 3/7] docs: make banner responsive --- docs/docusaurus.config.js | 5 +- .../CloseButton/styles.module.css | 1 - .../theme/AnnouncementBar/Content/index.jsx | 27 +++++--- .../AnnouncementBar/Content/styles.module.css | 65 ++++++++++++++++++- .../theme/AnnouncementBar/styles.module.css | 31 +++++---- 5 files changed, 97 insertions(+), 32 deletions(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 84ef80b31b6..42549132ad6 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -127,10 +127,7 @@ module.exports = { }, announcementBar: { id: 'appjs_announcement', - content: ` - We're organizing app.js - a React Native & Expo-focused conference - Learn more - `, + content: '', // content is set in swizzled component backgroundColor: '#0033CC', textColor: '#FFFFFF', }, diff --git a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css index faa61b11799..d606fc5b061 100644 --- a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css +++ b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -1,7 +1,6 @@ .closeButton { padding: 0; line-height: 0; - opacity: 1; z-index: 1; } diff --git a/docs/src/theme/AnnouncementBar/Content/index.jsx b/docs/src/theme/AnnouncementBar/Content/index.jsx index a7a8b61b4cd..de330906682 100644 --- a/docs/src/theme/AnnouncementBar/Content/index.jsx +++ b/docs/src/theme/AnnouncementBar/Content/index.jsx @@ -1,17 +1,24 @@ import React from 'react'; import clsx from 'clsx'; -import {useThemeConfig} from '@docusaurus/theme-common'; +import { useThemeConfig } from '@docusaurus/theme-common'; import styles from './styles.module.css'; + export default function AnnouncementBarContent(props) { - const {announcementBar} = useThemeConfig(); - const {content} = announcementBar; return ( -
+
+
+ We're organizing app.js +

+ a React Native & Expo-focused conference +

+
+ + Learn more + +
); } diff --git a/docs/src/theme/AnnouncementBar/Content/styles.module.css b/docs/src/theme/AnnouncementBar/Content/styles.module.css index 16635d4b7dd..022798a3d13 100644 --- a/docs/src/theme/AnnouncementBar/Content/styles.module.css +++ b/docs/src/theme/AnnouncementBar/Content/styles.module.css @@ -1,10 +1,69 @@ .content { - font-size: 85%; - text-align: center; - padding: 5px 0; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + max-width: 1440px; + + padding: 10px 0; } .content a { color: inherit; text-decoration: underline; } +.wrapper { + display: flex; + align-items: flex-end; + justify-content: center; +} + +.headline { + margin-right: 8px; +} + +.subText { + margin: 0; +} + +.subText::before { + content: ' - '; +} + +.link { + font-size: 20px; +} + +@media screen and (max-width: 996px) { + .content { + flex-direction: column; + align-items: flex-start; + padding: 20px 24px; + } + .wrapper { + flex-direction: column; + align-items: flex-start; + margin-bottom: 8px; + } + .headline, + .subText { + font-size: 20px; + } + + .subText::before { + content: ''; + } + .link { + font-size: 16px; + } +} +@media screen and (max-width: 600px) { + .headline, + .subText { + font-size: 16px; + } + + .link { + font-size: 14px; + } +} diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css index a7106020641..6624e11d41e 100644 --- a/docs/src/theme/AnnouncementBar/styles.module.css +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -1,13 +1,9 @@ :root { - --docusaurus-announcement-bar-height: 64px; --docusaurus-announcement-bar-font-size: 24px; - --docusaurus-announcement-bar-link-font-size: 20px; } .announcementBar { display: flex; - align-items: center; - height: var(--docusaurus-announcement-bar-height); font-size: var(--docusaurus-announcement-bar-font-size); background-color: var(--ifm-color-white); color: var(--ifm-color-black); @@ -33,21 +29,20 @@ top: -100px; } -.announcementBar a { - font-size: var(--docusaurus-announcement-bar-link-font-size); -} - html[data-announcement-bar-initially-dismissed='true'] .announcementBar { display: none; } .announcementBarPlaceholder { - flex: 0 0 10px; + flex: 0 0 30px; + margin: 0 25px; } .announcementBarClose { flex: 0 0 30px; + margin: 0 25px; align-self: stretch; + opacity: 1; } .announcementBarContent { @@ -60,13 +55,21 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { } } -@media (min-width: 997px) { - :root { - --docusaurus-announcement-bar-height: 60px; +@media screen and (max-width: 996px) { + .announcementBarClose { + flex-basis: 50px; } - - .announcementBarPlaceholder, + .announcementBarPlaceholder { + display: none; + } +} +@media screen and (max-width: 600px) { .announcementBarClose { + margin: 0; flex-basis: 50px; } + + .announcementBarRightAdornment { + display: none; + } } From 3f541f7b25e7c0d45b9d1c9a71f48911b0701f67 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 18:39:17 +0100 Subject: [PATCH 4/7] docs: show particles on every page --- docs/src/theme/AnnouncementBar/Content/index.jsx | 1 - docs/src/theme/AnnouncementBar/index.jsx | 9 +++------ .../img => src/theme/AnnouncementBar}/particles.svg | 0 3 files changed, 3 insertions(+), 7 deletions(-) rename docs/{static/img => src/theme/AnnouncementBar}/particles.svg (100%) diff --git a/docs/src/theme/AnnouncementBar/Content/index.jsx b/docs/src/theme/AnnouncementBar/Content/index.jsx index de330906682..4eae7f64f3e 100644 --- a/docs/src/theme/AnnouncementBar/Content/index.jsx +++ b/docs/src/theme/AnnouncementBar/Content/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; import clsx from 'clsx'; -import { useThemeConfig } from '@docusaurus/theme-common'; import styles from './styles.module.css'; export default function AnnouncementBarContent(props) { diff --git a/docs/src/theme/AnnouncementBar/index.jsx b/docs/src/theme/AnnouncementBar/index.jsx index d0015f96feb..940bffafce6 100644 --- a/docs/src/theme/AnnouncementBar/index.jsx +++ b/docs/src/theme/AnnouncementBar/index.jsx @@ -4,8 +4,7 @@ import { useAnnouncementBar } from '@docusaurus/theme-common/internal'; import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton'; import AnnouncementBarContent from '@theme/AnnouncementBar/Content'; import styles from './styles.module.css'; - -const particles = 'img/particles.svg'; +import Particles from './particles.svg'; export default function AnnouncementBar() { const { announcementBar } = useThemeConfig(); @@ -23,8 +22,7 @@ export default function AnnouncementBar() { color: textColor, }} role="banner"> - {isCloseable &&
} @@ -35,8 +33,7 @@ export default function AnnouncementBar() { className={styles.announcementBarClose} /> )} -
diff --git a/docs/static/img/particles.svg b/docs/src/theme/AnnouncementBar/particles.svg similarity index 100% rename from docs/static/img/particles.svg rename to docs/src/theme/AnnouncementBar/particles.svg From 3d59a76dc2da375cc84bb4ae84a044fff69a5385 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 18:46:10 +0100 Subject: [PATCH 5/7] docs: hide banner after app.js --- docs/src/theme/AnnouncementBar/index.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/src/theme/AnnouncementBar/index.jsx b/docs/src/theme/AnnouncementBar/index.jsx index 940bffafce6..98b04e5a9e2 100644 --- a/docs/src/theme/AnnouncementBar/index.jsx +++ b/docs/src/theme/AnnouncementBar/index.jsx @@ -14,6 +14,13 @@ export default function AnnouncementBar() { } const { backgroundColor, textColor, isCloseable } = announcementBar; + // hide announcement bar after app.js + const today = new Date(); + const endOfAppJS = new Date('2023-05-13T00:00:00.000Z'); + if (today > endOfAppJS) { + return null; + } + return (
Date: Tue, 7 Mar 2023 18:55:11 +0100 Subject: [PATCH 6/7] docs: move X to top right corner on mobile --- .../AnnouncementBar/CloseButton/styles.module.css | 10 ++++++++++ docs/src/theme/AnnouncementBar/styles.module.css | 7 +------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css index d606fc5b061..e721e761ce7 100644 --- a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css +++ b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -1,4 +1,7 @@ .closeButton { + display: flex; + align-items: center; + justify-content: center; padding: 0; line-height: 0; z-index: 1; @@ -7,3 +10,10 @@ .closeButton svg { color: white; } + +@media screen and (max-width: 996px) { + .closeButton { + align-items: flex-start; + padding: 24px; + } +} diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css index 6624e11d41e..9a324d727af 100644 --- a/docs/src/theme/AnnouncementBar/styles.module.css +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -57,18 +57,13 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { @media screen and (max-width: 996px) { .announcementBarClose { - flex-basis: 50px; + margin: 0; } .announcementBarPlaceholder { display: none; } } @media screen and (max-width: 600px) { - .announcementBarClose { - margin: 0; - flex-basis: 50px; - } - .announcementBarRightAdornment { display: none; } From 4d110b5a578b9c11b14b10a12fea5652be1e47fe Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 7 Mar 2023 18:59:02 +0100 Subject: [PATCH 7/7] docs: make docusaurus happy --- docs/docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 42549132ad6..b444479070f 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -127,7 +127,7 @@ module.exports = { }, announcementBar: { id: 'appjs_announcement', - content: '', // content is set in swizzled component + content: 'mleko', // content is set in swizzled component but docusaurus requires it to be non-empty backgroundColor: '#0033CC', textColor: '#FFFFFF', },