fix(v2): bootstrap doc sidebar

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)

packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js

@@ -7,32 +7,50 @@
 
 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';
 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 <NotFound {...props} />;
+ }
 
  return (
  <Layout title="Doc page" description="My Doc page">
  <DocSidebar
  docsSidebars={docsSidebars}
- path={currentRoute.path}
+ path={isHomePage ? homePagePath : currentRoute.path}
  sidebar={sidebar}
  />
  <section className="offset-1 mr-4 mt-4 col-xl-6 offset-xl-4 p-0 justify-content-center align-self-center overflow-hidden">
  <MDXProvider components={MDXComponents}>
- {renderRoutes(baseRoute.routes)}
+ {isHomePage ? (
+ <DocItem content={content} />
+ ) : (
+ renderRoutes(baseRoute.routes)
+ )}
  </MDXProvider>
  </section>
  </Layout>

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 (
  <NavItemBase>
@@ -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}