feat(v2): add announcement bar

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,71 @@
+/**
+ * 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_VIEWED_MESSAGE_KEY = 'docusaurus.announcement.viewed_message';
+
+function AnnouncementBar() {
+  const {
+    siteConfig: {themeConfig: {announcementBar = {}}} = {},
+  } = useDocusaurusContext();
+  const {content, backgroundColor, textColor} = announcementBar;
+  const [isClosed, setClosed] = useState(true);
+  const handleClose = () => {
+    sessionStorage.setItem(STORAGE_DISMISS_KEY, true);
+    setClosed(true);
+  };
+
+  useEffect(() => {
+    const currentAnnouncement = JSON.stringify(content);
+    const oldAnnouncement = sessionStorage.getItem(STORAGE_VIEWED_MESSAGE_KEY);
+    const isNewAnnouncement = currentAnnouncement !== oldAnnouncement;
+
+    sessionStorage.setItem(STORAGE_VIEWED_MESSAGE_KEY, currentAnnouncement);
+
+    if (isNewAnnouncement) {
+      sessionStorage.setItem(STORAGE_DISMISS_KEY, false);
+    }
+
+    if (
+      isNewAnnouncement ||
+      sessionStorage.getItem(STORAGE_DISMISS_KEY) === 'false'
+    ) {
+      setClosed(false);
+    }
+  }, []);
+
+  if (!content || isClosed) {
+    return null;
+  }
+
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      <button
+        type="button"
+        className={styles.announcementBarClose}
+        onClick={handleClose}
+        aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+
+      <div
+        className={styles.announcementBarContent}
+        dangerouslySetInnerHTML={{__html: content}}
+      />
+    </div>
+  );
+}
+
+export default AnnouncementBar;

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 20px;
+  font-size: 85%;
+  background-color: #fff;
+  color: #000;
+}
+
+.announcementBarClose {
+  position: absolute;
+  font-size: 25px;
+  top: 0;
+  right: 1em;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  background: none;
+  height: 100%;
+  line-height: 1;
+}
+
+.announcementBarContent a {
+  color: inherit;
+  text-decoration: underline;
+}

packages/docusaurus-theme-classic/src/theme/Layout/index.js

@@ -11,6 +11,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import ThemeProvider from '@theme/ThemeProvider';
+import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 
@@ -65,6 +66,7 @@ function Layout(props) {
         {permalink && <meta property="og:url" content={siteUrl + permalink} />}
         <meta name="twitter:card" content="summary" />
       </Head>
+      <AnnouncementBar />
       <Navbar />
       <div className="main-wrapper">{children}</div>
       {!noFooter && <Footer />}

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -6,16 +6,14 @@
  */
 
 import React, {useCallback, useState} from 'react';
+import classnames from 'classnames';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
-
-import classnames from 'classnames';
-
 import useThemeContext from '@theme/hooks/useThemeContext';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
@@ -57,26 +55,25 @@ function Navbar() {
   const {navbar = {}, disableDarkMode = false} = themeConfig;
   const {title, logo = {}, links = [], hideOnScroll = false} = navbar;
 
-  const [sidebarShown, setSidebarShown] = useState(false);
-  const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
-
   const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
-  useLockBodyScroll(sidebarShown);
+  const [sidebarShown, setSidebarShown] = useState(false);
+  const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
 
   const showSidebar = useCallback(() => {
     setSidebarShown(true);
   }, [setSidebarShown]);
   const hideSidebar = useCallback(() => {
     setSidebarShown(false);
   }, [setSidebarShown]);
-
   const onToggleChange = useCallback(
     e => (e.target.checked ? setDarkTheme() : setLightTheme()),
     [setLightTheme, setDarkTheme],
   );
 
+  useLockBodyScroll(sidebarShown);
+
   const logoLink = logo.href || baseUrl;
   let logoLinkProps = {};
 

packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js

@@ -25,6 +25,10 @@ const useHideableNavbar = hideOnScroll => {
   const handleScroll = () => {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
+    if (scrollTop === 0) {
+      setIsNavbarVisible(true);
+    }
+
     if (scrollTop < navbarHeight) {
       return;
     }
@@ -39,7 +43,7 @@ const useHideableNavbar = hideOnScroll => {
     const documentHeight = document.documentElement.scrollHeight - navbarHeight;
     const windowHeight = window.innerHeight;
 
-    if (lastScrollTop && scrollTop > lastScrollTop) {
+    if (lastScrollTop && scrollTop >= lastScrollTop) {
       setIsNavbarVisible(false);
     } else if (scrollTop + windowHeight < documentHeight) {
       setIsNavbarVisible(true);

website/docs/theme-classic.md

@@ -43,6 +43,25 @@ module.exports = {
 }
 ```
 
+### Announcement bar
+
+Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and dismissable panel above the navbar.
+
+```js {5-9}
+// docusaurus.config.js
+module.exports = {
+  ...
+  themeConfig: {
+    announcementBar: {
+      content: 'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
+      backgroundColor: '#fafbfc', // Defaults to `#fff`
+      textColor: '#091E42', // Defaults to `#000`
+    },
+    ...
+  },
+}
+```
+
 ## Navbar
 
 ### Navbar Title & Logo

website/docusaurus.config.js

@@ -59,6 +59,12 @@ module.exports = {
     ],
   ],
   themeConfig: {
+    announcementBar: {
+      content:
+        '⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a>! ⭐️',
+      backgroundColor: '#fafbfc',
+      textColor: '#091E42',
+    },
     prism: {
       theme: require('prism-react-renderer/themes/github'),
       darkTheme: require('prism-react-renderer/themes/dracula'),