chore: Test Docusaurus webpack 5 support (#318)

apache · May 4, 2021 · b02a32e · b02a32e
1 parent 33e60c2
commit b02a32e
Show file tree

Hide file tree

Showing 3 changed files with 2,031 additions and 3,040 deletions.
diff --git a/website/package.json b/website/package.json
@@ -16,12 +16,12 @@
     "babel-plugin-styled-components": "^1.12.0"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.71",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.71",
+    "@docusaurus/core": "2.0.0-alpha.75",
+    "@docusaurus/preset-classic": "2.0.0-alpha.75",
     "change-case": "^4.1.2",
     "clsx": "^1.1.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "styled-components": "^5.2.1"
   },

diff --git a/website/src/theme/DocSidebar/index.js b/website/src/theme/DocSidebar/index.js
@@ -154,6 +154,19 @@ function DocSidebarItem(props) {
   }
 }
 
+function useShowAnnouncementBar() {
+  const {isAnnouncementBarClosed} = useUserPreferencesContext();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(
+    !isAnnouncementBarClosed,
+  );
+  useScrollPosition(({scrollY}) => {
+    if (!isAnnouncementBarClosed) {
+      setShowAnnouncementBar(scrollY === 0);
+    }
+  });
+  return showAnnouncementBar;
+}
+
 function DocSidebar({
   path,
   sidebar,
@@ -162,19 +175,14 @@ function DocSidebar({
   isHidden,
   docPluginId
 }) {
+  const showAnnouncementBar = useShowAnnouncementBar();
   const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
   const {
     navbar: {
       hideOnScroll
     },
     hideableSidebar
   } = useThemeConfig();
-  const {
-    isAnnouncementBarClosed
-  } = useUserPreferencesContext();
-  const {
-    scrollY
-  } = useScrollPosition();
   useLockBodyScroll(showResponsiveSidebar);
   const windowSize = useWindowSize();
   useEffect(() => {
@@ -191,7 +199,7 @@ function DocSidebar({
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <div className={clsx('menu', 'menu--responsive', 'thin-scrollbar', styles.menu, {
       'menu--show': showResponsiveSidebar,
-      [styles.menuWithAnnouncementBar]: !isAnnouncementBarClosed && scrollY === 0
+      [styles.menuWithAnnouncementBar]: showAnnouncementBar
     })}>
         <button aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'} aria-haspopup="true" className="button button--secondary button--sm menu__button" type="button" onClick={() => {
         setShowResponsiveSidebar(!showResponsiveSidebar);
@@ -213,4 +221,4 @@ function DocSidebar({
     </div>;
 }
 
-export default DocSidebar;
+export default DocSidebar;