diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 57bd290e60..405e40e2d4 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -88,6 +88,11 @@ const config = { }, ], }, + announcementBar: { + content: ' ', + backgroundColor: '#03c', + textColor: '#fff', + }, footer: { style: 'light', links: [], diff --git a/docs/src/theme/AnnouncementBar/CloseButton/index.jsx b/docs/src/theme/AnnouncementBar/CloseButton/index.js similarity index 88% rename from docs/src/theme/AnnouncementBar/CloseButton/index.jsx rename to docs/src/theme/AnnouncementBar/CloseButton/index.js index 75474929e4..4a3c5bbe9a 100644 --- a/docs/src/theme/AnnouncementBar/CloseButton/index.jsx +++ b/docs/src/theme/AnnouncementBar/CloseButton/index.js @@ -14,7 +14,7 @@ export default function AnnouncementBarCloseButton(props) { })} {...props} className={clsx('clean-btn close', styles.closeButton, props.className)}> - + ); } diff --git a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css index e721e761ce..0494ec0d40 100644 --- a/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css +++ b/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -1,19 +1,4 @@ .closeButton { - display: flex; - align-items: center; - justify-content: center; padding: 0; line-height: 0; - z-index: 1; -} - -.closeButton svg { - color: white; -} - -@media screen and (max-width: 996px) { - .closeButton { - align-items: flex-start; - padding: 24px; - } } diff --git a/docs/src/theme/AnnouncementBar/Content/ArrowButton/index.js b/docs/src/theme/AnnouncementBar/Content/ArrowButton/index.js new file mode 100644 index 0000000000..0c0952fa8f --- /dev/null +++ b/docs/src/theme/AnnouncementBar/Content/ArrowButton/index.js @@ -0,0 +1,22 @@ +import React from 'react'; + +function ArrowButton({ className }) { + return ( + + + + + + ); +} + +export default ArrowButton; diff --git a/docs/src/theme/AnnouncementBar/Content/index.js b/docs/src/theme/AnnouncementBar/Content/index.js new file mode 100644 index 0000000000..f559bb0b08 --- /dev/null +++ b/docs/src/theme/AnnouncementBar/Content/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import clsx from 'clsx'; +import ArrowButton from './ArrowButton'; +import styles from './styles.module.css'; + +export default function AnnouncementBarContent(props) { + return ( +
+
+ App.js Conf 2024 +

+ An Expo & React Native conference in Europe is back, May 22-24 in + Kraków, Poland! +

+
+ + Learn More +
+ +
+ +
+ ); +} diff --git a/docs/src/theme/AnnouncementBar/Content/index.jsx b/docs/src/theme/AnnouncementBar/Content/index.jsx deleted file mode 100644 index 4eae7f64f3..0000000000 --- a/docs/src/theme/AnnouncementBar/Content/index.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; - -export default function AnnouncementBarContent(props) { - 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 ef9269c670..1c2b5a3b71 100644 --- a/docs/src/theme/AnnouncementBar/Content/styles.module.css +++ b/docs/src/theme/AnnouncementBar/Content/styles.module.css @@ -5,68 +5,83 @@ margin: 0 auto; max-width: 1440px; - padding: 10px 0; + padding: 1rem 1.5rem; } .content a { color: inherit; - text-decoration: underline; } + .wrapper { display: flex; - align-items: flex-end; + flex-direction: row; + gap: 1rem; + align-items: center; justify-content: center; } .headline { - margin-right: 8px; + font-size: 16px; } -.subText { +p.subText { + font-size: 14px; margin: 0; } -.subText::before { - content: ' - '; +a.link { + text-decoration: none; } .link { - font-size: 20px; + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + font-size: 12px; + padding: 4px 12px; + border: 1px solid var(--swm-off-white); + border-radius: 6px; + background-color: var(--swm-off-white); + transition: 0.2s ease-in-out; +} + +.linkTitle { + color: #03c; + font-weight: 500; +} + +.link:hover { + background-color: var(--swm-navy-light-20); + border-color: var(--swm-navy-light-20); + text-decoration: none; +} + +.linkArrow { + width: 16px; + height: 16px; + color: #03c; +} + +.linkArrowContainer { + display: flex; + align-items: center; } @media screen and (max-width: 996px) { .content { - flex-direction: column; - align-items: flex-start; - padding: 20px 24px; + gap: 12px; } - .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; +@media screen and (max-width: 768px) { + .content { + flex-direction: column; + align-items: flex-start; + padding: 1rem 1.5rem; } } diff --git a/docs/src/theme/AnnouncementBar/index.js b/docs/src/theme/AnnouncementBar/index.js new file mode 100644 index 0000000000..246e14bb74 --- /dev/null +++ b/docs/src/theme/AnnouncementBar/index.js @@ -0,0 +1,73 @@ +import React, { useEffect, useState } 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 BrowserOnly from '@docusaurus/BrowserOnly'; +import styles from './styles.module.css'; + +function AnnouncementBar() { + const { announcementBar } = useThemeConfig(); + const { isActive, close } = useAnnouncementBar(); + const [isPageLoaded, setIsPageLoaded] = useState( + document.readyState === 'complete' + ); + + useEffect(() => { + const handlePageLoad = () => { + setIsPageLoaded(true); + }; + + if (document.readyState === 'complete') { + setIsPageLoaded(true); + } else { + window.addEventListener('load', handlePageLoad); + } + + return () => { + window.removeEventListener('load', handlePageLoad); + }; + }, []); + + if (!isPageLoaded || !isActive) { + return null; + } + + // hide announcement bar after app.js + const today = new Date(); + const endOfAppJS = new Date('2024-05-25T00:00:00.000Z'); + if (today > endOfAppJS) { + return null; + } + + const { backgroundColor, textColor, isCloseable } = announcementBar; + return ( + Loading...}> + {() => ( +
+ {isCloseable &&
} + + {isCloseable && ( +
+ +
+ )} +
+ )} + + ); +} + +export default function HOCAnnouncementBar() { + return ( +
}> + {() => } + + ); +} diff --git a/docs/src/theme/AnnouncementBar/index.jsx b/docs/src/theme/AnnouncementBar/index.jsx deleted file mode 100644 index 98b04e5a9e..0000000000 --- a/docs/src/theme/AnnouncementBar/index.jsx +++ /dev/null @@ -1,48 +0,0 @@ -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'; -import Particles from './particles.svg'; - -export default function AnnouncementBar() { - const { announcementBar } = useThemeConfig(); - const { isActive, close } = useAnnouncementBar(); - if (!isActive) { - return null; - } - 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 ( -
- - {isCloseable &&
} - - {isCloseable && ( - - )} - -
- ); -} diff --git a/docs/src/theme/AnnouncementBar/particles.svg b/docs/src/theme/AnnouncementBar/particles.svg deleted file mode 100644 index ece09991b4..0000000000 --- a/docs/src/theme/AnnouncementBar/particles.svg +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css index 9a324d727a..076a941e4a 100644 --- a/docs/src/theme/AnnouncementBar/styles.module.css +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -5,10 +5,13 @@ .announcementBar { display: flex; font-size: var(--docusaurus-announcement-bar-font-size); - background-color: var(--ifm-color-white); - color: var(--ifm-color-black); + background-image: url(/static/img/appjs.svg), linear-gradient(#03c, #03c); + background-position: 0; + background-size: cover; + color: var(--swm-off-white); position: relative; overflow: hidden; + z-index: 10; } .announcementBarAdornment { @@ -19,20 +22,6 @@ pointer-events: none; } -.announcementBarLeftAdornment { - left: -125px; - top: -150px; -} - -.announcementBarRightAdornment { - right: -200px; - top: -100px; -} - -html[data-announcement-bar-initially-dismissed='true'] .announcementBar { - display: none; -} - .announcementBarPlaceholder { flex: 0 0 30px; margin: 0 25px; @@ -49,6 +38,12 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { flex: 1 1 auto; } +.buttonContainer { + display: flex; + justify-content: center; + padding-right: 1rem; +} + @media print { .announcementBar { display: none; @@ -63,6 +58,14 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { display: none; } } +@media screen and (max-width: 768px) { + .buttonContainer { + display: flex; + flex-direction: column; + justify-content: flex-start; + padding-top: 1rem; + } +} @media screen and (max-width: 600px) { .announcementBarRightAdornment { display: none; diff --git a/docs/static/img/appjs.svg b/docs/static/img/appjs.svg new file mode 100644 index 0000000000..7cc9145d30 --- /dev/null +++ b/docs/static/img/appjs.svg @@ -0,0 +1 @@ +