From 49b41c8ff17da53473c2ff0fcd11dad3c91c29a8 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 29 Dec 2019 22:32:09 +0300 Subject: [PATCH 1/3] fix(v2): reinit hideable header position when page switched --- packages/docusaurus-theme-classic/src/index.js | 6 +++++- packages/docusaurus-theme-classic/src/theme.js | 18 ++++++++++++++++++ .../src/theme/hooks/useHideableNavbar.js | 2 ++ 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme.js diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js index 0f09eab68218..fc0554417843 100644 --- a/packages/docusaurus-theme-classic/src/index.js +++ b/packages/docusaurus-theme-classic/src/index.js @@ -55,7 +55,11 @@ module.exports = function(context, options) { }, getClientModules() { - return ['infima/dist/css/default/default.css', customCss]; + return [ + 'infima/dist/css/default/default.css', + customCss, + path.resolve(__dirname, './theme'), + ]; }, injectHtmlTags() { diff --git a/packages/docusaurus-theme-classic/src/theme.js b/packages/docusaurus-theme-classic/src/theme.js new file mode 100644 index 000000000000..c8c59f297f90 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme.js @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +export default (function() { + if (!window || !CustomEvent || !window.dispatchEvent) { + return null; + } + + return { + onRouteUpdate() { + window.dispatchEvent(new CustomEvent('onRouteUpdate')); + }, + }; +})(); diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js index 00b375165ac1..b3befcdb73f4 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js @@ -41,9 +41,11 @@ const useHideableNavbar = hideOnScroll => { } window.addEventListener('scroll', handleScroll); + window.addEventListener('onRouteUpdate', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); + window.removeEventListener('onRouteUpdate', handleScroll); }; }, [lastScrollTop, navbarHeight]); From 48d3058d7c8116a9a57b2df021210f8bb99ef237 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 29 Dec 2019 23:07:10 +0300 Subject: [PATCH 2/3] fix(v2): fix CI --- packages/docusaurus-theme-classic/src/theme.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme.js b/packages/docusaurus-theme-classic/src/theme.js index c8c59f297f90..37b496669630 100644 --- a/packages/docusaurus-theme-classic/src/theme.js +++ b/packages/docusaurus-theme-classic/src/theme.js @@ -6,13 +6,15 @@ */ export default (function() { - if (!window || !CustomEvent || !window.dispatchEvent) { + if (typeof window === 'undefined') { return null; } return { onRouteUpdate() { - window.dispatchEvent(new CustomEvent('onRouteUpdate')); + if (window && window.dispatchEvent && CustomEvent) { + window.dispatchEvent(new CustomEvent('onRouteUpdate')); + } }, }; })(); From eae34568acdc9b80a24bdb35b8ed25ea5c1bb647 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 30 Dec 2019 17:34:06 +0300 Subject: [PATCH 3/3] refactor(v2): use react-router-dom hook instead plugin API --- .../package-lock.json | 154 ++++++++++++++++++ .../docusaurus-theme-classic/package.json | 1 + .../docusaurus-theme-classic/src/index.js | 6 +- .../docusaurus-theme-classic/src/theme.js | 20 --- .../src/theme/hooks/useHideableNavbar.js | 8 +- 5 files changed, 162 insertions(+), 27 deletions(-) create mode 100644 packages/docusaurus-theme-classic/package-lock.json delete mode 100644 packages/docusaurus-theme-classic/src/theme.js diff --git a/packages/docusaurus-theme-classic/package-lock.json b/packages/docusaurus-theme-classic/package-lock.json new file mode 100644 index 000000000000..8f0f97663110 --- /dev/null +++ b/packages/docusaurus-theme-classic/package-lock.json @@ -0,0 +1,154 @@ +{ + "name": "@docusaurus/theme-classic", + "version": "2.0.0-alpha.40", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@babel/runtime": { + "version": "7.7.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz", + "integrity": "sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "requires": { + "react-is": "^16.7.0" + } + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react-is": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", + "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" + }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + } + } +} diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 064cede9a815..ab0554fbf141 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -15,6 +15,7 @@ "infima": "0.2.0-alpha.3", "parse-numeric-range": "^0.0.2", "prism-react-renderer": "^1.0.2", + "react-router-dom": "^5.1.2", "react-toggle": "^4.1.1" }, "peerDependencies": { diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js index fc0554417843..0f09eab68218 100644 --- a/packages/docusaurus-theme-classic/src/index.js +++ b/packages/docusaurus-theme-classic/src/index.js @@ -55,11 +55,7 @@ module.exports = function(context, options) { }, getClientModules() { - return [ - 'infima/dist/css/default/default.css', - customCss, - path.resolve(__dirname, './theme'), - ]; + return ['infima/dist/css/default/default.css', customCss]; }, injectHtmlTags() { diff --git a/packages/docusaurus-theme-classic/src/theme.js b/packages/docusaurus-theme-classic/src/theme.js deleted file mode 100644 index 37b496669630..000000000000 --- a/packages/docusaurus-theme-classic/src/theme.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -export default (function() { - if (typeof window === 'undefined') { - return null; - } - - return { - onRouteUpdate() { - if (window && window.dispatchEvent && CustomEvent) { - window.dispatchEvent(new CustomEvent('onRouteUpdate')); - } - }, - }; -})(); diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js index b3befcdb73f4..b38e107f8146 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js @@ -6,6 +6,7 @@ */ import {useState, useCallback, useEffect} from 'react'; +import {useLocation} from 'react-router-dom'; const useHideableNavbar = hideOnScroll => { const [isNavbarVisible, setIsNavbarVisible] = useState(true); @@ -16,6 +17,7 @@ const useHideableNavbar = hideOnScroll => { setNavbarHeight(node.getBoundingClientRect().height); } }, []); + const location = useLocation(); const handleScroll = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; @@ -41,14 +43,16 @@ const useHideableNavbar = hideOnScroll => { } window.addEventListener('scroll', handleScroll); - window.addEventListener('onRouteUpdate', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); - window.removeEventListener('onRouteUpdate', handleScroll); }; }, [lastScrollTop, navbarHeight]); + useEffect(() => { + setIsNavbarVisible(true); + }, [location]); + return { navbarRef, isNavbarVisible,