From 7d8aeacf52a9c1e8ccae01b5fd3e0167cb13b8be Mon Sep 17 00:00:00 2001 From: Fanny Date: Wed, 13 May 2020 00:24:53 -0300 Subject: [PATCH] feat(v2): bootstrap layout navbar (#2668) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(v2): add minor adjustements and footer component * fix(v2): margin and spacing of footer * feat(v2): add navbar component * ádd collapse classname * feat(v2): add dependencies * feat(v2): remove unused code * feat(v2): remove unused links * feat(v2): add reactstrap components :| * feat(v2): add brand and other nav componnets --- .../templates/bootstrap/docusaurus.config.js | 1 + .../templates/bootstrap/src/pages/index.js | 14 +-- .../docusaurus-theme-bootstrap/package.json | 3 +- .../src/theme/BlogListPage/index.js | 2 +- .../src/theme/Navbar/index.js | 104 ++++++++++++++++++ .../src/theme/ThemeContext.js | 16 +++ .../src/theme/hooks/useLogo.js | 41 +++++++ .../src/theme/hooks/useThemeContext.js | 16 +++ .../src/client/exports/BrowserOnly.tsx | 4 +- yarn.lock | 80 +++++++++++++- 10 files changed, 264 insertions(+), 17 deletions(-) create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/ThemeContext.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.js diff --git a/packages/docusaurus-init/templates/bootstrap/docusaurus.config.js b/packages/docusaurus-init/templates/bootstrap/docusaurus.config.js index c4535cc8d9..341d5513aa 100644 --- a/packages/docusaurus-init/templates/bootstrap/docusaurus.config.js +++ b/packages/docusaurus-init/templates/bootstrap/docusaurus.config.js @@ -14,6 +14,7 @@ module.exports = { src: 'img/logo.svg', }, links: [ + {to: 'blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/facebook/docusaurus', label: 'GitHub', diff --git a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js index 90cff1e1b1..14aace079c 100644 --- a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js +++ b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js @@ -4,6 +4,8 @@ import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import Navbar from '@theme/Navbar'; + import styles from './styles.module.css'; const features = [ @@ -61,19 +63,13 @@ function Home() { -
+
+

{siteConfig.title}

{siteConfig.tagline}

- - Get Started - + Get Started
diff --git a/packages/docusaurus-theme-bootstrap/package.json b/packages/docusaurus-theme-bootstrap/package.json index 4668fc1e40..4a5e5aa5cc 100644 --- a/packages/docusaurus-theme-bootstrap/package.json +++ b/packages/docusaurus-theme-bootstrap/package.json @@ -8,7 +8,8 @@ "access": "public" }, "dependencies": { - "bootstrap": "^4.4.1" + "bootstrap": "^4.4.1", + "reactstrap": "^8.4.1" }, "peerDependencies": { "@docusaurus/core": "^2.0.0", diff --git a/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js b/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js index bf95c1efa0..1f5482438e 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js +++ b/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js @@ -13,7 +13,7 @@ function BlogListPage(props) { const {items, metadata} = props; return ( -
+
{items.map(({content: BlogPostContent}) => (
+ + {label} + + + ); +} + +function Navbar() { + const { + siteConfig: { + themeConfig: {navbar: {title, links = []} = {}}, + }, + isClient, + } = useDocusaurusContext(); + + const [sidebarShown, setSidebarShown] = useState(false); + const handleToggle = useCallback(() => { + setSidebarShown(!sidebarShown); + }, [sidebarShown, setSidebarShown]); + const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); + + return ( + + + + {logoImageUrl != null && ( + {logoAlt} + )} + {title != null && {title}} + + + + + + + + + + + ); +} + +export default Navbar; diff --git a/packages/docusaurus-theme-bootstrap/src/theme/ThemeContext.js b/packages/docusaurus-theme-bootstrap/src/theme/ThemeContext.js new file mode 100644 index 0000000000..b521d46bfc --- /dev/null +++ b/packages/docusaurus-theme-bootstrap/src/theme/ThemeContext.js @@ -0,0 +1,16 @@ +/** + * 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 from 'react'; + +const ThemeContext = React.createContext({ + isDarkTheme: false, + setLightTheme: () => {}, + setDarkTheme: () => {}, +}); + +export default ThemeContext; diff --git a/packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.js b/packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.js new file mode 100644 index 0000000000..ddb15ad1a8 --- /dev/null +++ b/packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.js @@ -0,0 +1,41 @@ +/** + * 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useThemeContext from '@theme/hooks/useThemeContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import isInternalUrl from '@docusaurus/isInternalUrl'; + +const useLogo = () => { + const { + siteConfig: {baseUrl, themeConfig: {navbar: {logo = {}} = {}}} = {}, + } = useDocusaurusContext(); + const {isDarkTheme} = useThemeContext(); + const logoLink = logo.href || baseUrl; + let logoLinkProps = {}; + + if (logo.target) { + logoLinkProps = {target: logo.target}; + } else if (!isInternalUrl(logoLink)) { + logoLinkProps = { + rel: 'noopener noreferrer', + target: '_blank', + }; + } + + const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src; + const logoImageUrl = useBaseUrl(logoSrc); + + return { + logoLink, + logoLinkProps, + logoImageUrl, + logoAlt: logo.alt, + }; +}; + +export default useLogo; diff --git a/packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.js b/packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.js new file mode 100644 index 0000000000..a71392756f --- /dev/null +++ b/packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.js @@ -0,0 +1,16 @@ +/** + * 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 {useContext} from 'react'; + +import ThemeContext from '@theme/ThemeContext'; + +function useThemeContext() { + return useContext(ThemeContext); +} + +export default useThemeContext; diff --git a/packages/docusaurus/src/client/exports/BrowserOnly.tsx b/packages/docusaurus/src/client/exports/BrowserOnly.tsx index 4e2ff6ecd0..a72fec5b0b 100644 --- a/packages/docusaurus/src/client/exports/BrowserOnly.tsx +++ b/packages/docusaurus/src/client/exports/BrowserOnly.tsx @@ -9,10 +9,10 @@ import React from 'react'; import ExecutionEnvironment from './ExecutionEnvironment'; function BrowserOnly({children, fallback}) { - if (!ExecutionEnvironment.canUseDOM || children == null) { + if (!ExecutionEnvironment.canUseDOM || children == null) { return fallback || null; } - + return <>{children()}; } diff --git a/yarn.lock b/yarn.lock index 0917122493..600647349e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -975,7 +975,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.2.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== @@ -4630,7 +4630,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5, classnames@^2.2.6: +classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -5274,6 +5274,14 @@ create-react-context@0.2.2: fbjs "^0.8.0" gud "^1.0.0" +create-react-context@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" + integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== + dependencies: + gud "^1.0.0" + warning "^4.0.3" + cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -5722,7 +5730,7 @@ dedent@^0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= -deep-equal@^1.0.1: +deep-equal@^1.0.1, deep-equal@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a" integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g== @@ -6016,6 +6024,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-iterator@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad" @@ -12617,6 +12632,11 @@ pngjs@^3.0.0, pngjs@^3.3.3: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f" integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w== +popper.js@^1.14.4: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.25: version "1.0.25" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca" @@ -13508,7 +13528,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -13866,6 +13886,11 @@ react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-live@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.2.2.tgz#834edf1c11204e49fa7468166316b2e70da1a6b0" @@ -13892,6 +13917,19 @@ react-loadable@^5.5.0: dependencies: prop-types "^15.5.0" +react-popper@^1.3.6: + version "1.3.7" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324" + integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww== + dependencies: + "@babel/runtime" "^7.1.2" + create-react-context "^0.3.0" + deep-equal "^1.1.1" + popper.js "^1.14.4" + prop-types "^15.6.1" + typed-styles "^0.0.7" + warning "^4.0.2" + react-router-config@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988" @@ -13957,6 +13995,16 @@ react-toggle@^4.1.1: dependencies: classnames "^2.2.5" +react-transition-group@^2.3.1: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" + integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== + dependencies: + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-lifecycles-compat "^3.0.4" + react-waypoint@^9.0.2: version "9.0.2" resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-9.0.2.tgz#d65fb0fe6ff5c1b832a1d01b1462a661fb921e45" @@ -13975,6 +14023,18 @@ react@^16.8.4: object-assign "^4.1.1" prop-types "^15.6.2" +reactstrap@^8.4.1: + version "8.4.1" + resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.4.1.tgz#c7f63b9057f58b52833061711ebe235b9ec4e3e5" + integrity sha512-oAjp9PYYUGKl7SLXwrQ1oRIrYw0MqfO2mUqYgGapFKHG2uwjEtLip5rYxtMujkGx3COjH5FX1WtcfNU4oqpH0Q== + dependencies: + "@babel/runtime" "^7.2.0" + classnames "^2.2.3" + prop-types "^15.5.8" + react-lifecycles-compat "^3.0.4" + react-popper "^1.3.6" + react-transition-group "^2.3.1" + read-cmd-shim@^1.0.1: version "1.0.5" resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16" @@ -16532,6 +16592,11 @@ type-is@~1.6.17, type-is@~1.6.18: media-typer "0.3.0" mime-types "~2.1.24" +typed-styles@^0.0.7: + version "0.0.7" + resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9" + integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q== + typedarray-to-buffer@^3.1.5: version "3.1.5" resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080" @@ -17100,6 +17165,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^4.0.2, warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"