diff --git a/packages/docusaurus-theme-bootstrap/README.md b/packages/docusaurus-theme-bootstrap/README.md new file mode 100644 index 000000000000..3687e9e0dcfc --- /dev/null +++ b/packages/docusaurus-theme-bootstrap/README.md @@ -0,0 +1,31 @@ +# Docusaurus Theme Bootstrap + +The bootstrap theme for Docusaurus. + +## Installation + +Add `docusaurus/theme-bootstrap` to your package: + +```bash +npm i @docusaurus/theme-bootstrao +# or +yarn add @docusaurus/theme-bootstrap +``` + +Modify your `docusaurus.config.js`: + +```diff +module.exports = { + ... ++ themes: ['@docusaurus/theme-bootstrap'], + ... +} +``` + +## Swizzling components + +```shell +$ npm swizzle @docusaurus/theme-bootstrap [component name] +``` + +All components used by this theme can be found [here](https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-theme-bootstrap/src/theme) diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js index 20fe578739d1..93f92e5fc4a3 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js +++ b/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js @@ -7,6 +7,8 @@ import React from 'react'; import renderRoutes from '@docusaurus/renderRoutes'; +import NotFound from '@theme/NotFound'; +import DocItem from '@theme/DocItem'; import DocSidebar from '@theme/DocSidebar'; import MDXComponents from '@theme/MDXComponents'; import Layout from '@theme/Layout'; @@ -14,25 +16,41 @@ import {MDXProvider} from '@mdx-js/react'; import {matchPath} from '@docusaurus/router'; function DocPage(props) { - const {route: baseRoute, docsMetadata, location} = props; + const {route: baseRoute, docsMetadata, location, content} = props; + const { + permalinkToSidebar, + docsSidebars, + isHomePage, + homePagePath, + } = docsMetadata; // case-sensitive route such as it is defined in the sidebar - const currentRoute = - baseRoute.routes.find((route) => { - return matchPath(location.pathname, route); - }) || {}; - const {permalinkToSidebar, docsSidebars} = docsMetadata; - const sidebar = permalinkToSidebar[currentRoute.path]; + const currentRoute = !isHomePage + ? baseRoute.routes.find((route) => { + return matchPath(location.pathname, route); + }) || {} + : {}; + const sidebar = isHomePage + ? content.metadata.sidebar + : permalinkToSidebar[currentRoute.path]; + + if (!isHomePage && Object.keys(currentRoute).length === 0) { + return ; + } return (
- {renderRoutes(baseRoute.routes)} + {isHomePage ? ( + + ) : ( + renderRoutes(baseRoute.routes) + )}
diff --git a/packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js b/packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js index 5b04c9c183b6..6ebff920fab3 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js @@ -18,8 +18,19 @@ import { NavItem as NavItemBase, } from 'reactstrap'; -function NavItem({href, label, to, ...props}) { +function NavItem({ + activeBasePath, + activeBaseRegex, + href, + label, + to, + activeClassName = 'nav-link text-info', + prependBaseUrlToHref, + ...props +}) { const toUrl = useBaseUrl(to); + const activeBaseUrl = useBaseUrl(activeBasePath); + const normalizedHref = useBaseUrl(href, true); return ( @@ -29,10 +40,20 @@ function NavItem({href, label, to, ...props}) { ? { target: '_blank', rel: 'noopener noreferrer', - href, + href: prependBaseUrlToHref ? normalizedHref : href, } : { + isNavLink: true, + activeClassName, to: toUrl, + ...(activeBasePath || activeBaseRegex + ? { + isActive: (_match, location) => + activeBaseRegex + ? new RegExp(activeBaseRegex).test(location.pathname) + : location.pathname.startsWith(activeBaseUrl), + } + : null), })} {...props}> {label}