diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js new file mode 100644 index 0000000000..714441de87 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js @@ -0,0 +1,70 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {useState, useEffect} from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +import styles from './styles.module.css'; + +const STORAGE_DISMISS_KEY = 'docusaurus.announcement.dismiss'; +const STORAGE_ID_KEY = 'docusaurus.announcement.id'; + +function AnnouncementBar() { + const { + siteConfig: {themeConfig: {announcementBar = {}}} = {}, + } = useDocusaurusContext(); + const {id, content, backgroundColor, textColor} = announcementBar; + const [isClosed, setClosed] = useState(true); + const handleClose = () => { + sessionStorage.setItem(STORAGE_DISMISS_KEY, true); + setClosed(true); + }; + + useEffect(() => { + const viewedId = sessionStorage.getItem(STORAGE_ID_KEY); + const isNewAnnouncement = id !== viewedId; + + sessionStorage.setItem(STORAGE_ID_KEY, id); + + if (isNewAnnouncement) { + sessionStorage.setItem(STORAGE_DISMISS_KEY, false); + } + + if ( + isNewAnnouncement || + sessionStorage.getItem(STORAGE_DISMISS_KEY) === 'false' + ) { + setClosed(false); + } + }, []); + + if (!content || isClosed) { + return null; + } + + return ( +
+
+ + +
+ ); +} + +export default AnnouncementBar; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css new file mode 100644 index 0000000000..286a88a9dc --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css @@ -0,0 +1,48 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.announcementBar { + position: relative; + width: 100%; + background-color: #fff; + color: #000; +} + +.announcementBarClose { + position: absolute; + right: 0; + top: 0; + width: 55px; + font-size: 25px; + padding: 0; + border: none; + cursor: pointer; + background: none; + height: 100%; +} + +.announcementBarContent { + font-size: 85%; + width: 100%; + text-align: center; + padding: 5px 0; + margin-right: 55px; +} + +@media screen and (max-width: 576px) { + .announcementBarClose { + width: 35px; + } + .announcementBarContent { + margin-right: 35px; + } +} + +.announcementBarContent a { + color: inherit; + text-decoration: underline; +} diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.js b/packages/docusaurus-theme-classic/src/theme/Layout/index.js index d149ae9b41..62c93c0115 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.js @@ -13,6 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; import ThemeProvider from '@theme/ThemeProvider'; import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider'; +import AnnouncementBar from '@theme/AnnouncementBar'; import Navbar from '@theme/Navbar'; import Footer from '@theme/Footer'; @@ -76,6 +77,7 @@ function Layout(props) { )} +
{children}
{!noFooter &&