fix(v2): bootstrap doc sidebar (#2860)

* fix(v2): doc sidebar * chore(v2): prettier * fix(v2): docs navbar path * fix(v2): fix error about activepath * chore(v2): prettier * feat(v2): change active color * feat(v2): update to new docs cpmfog * feat(v2): Add homepagepath
facebook · Jun 5, 2020 · 8a34872 · 8a34872
1 parent 174cd8d
commit 8a34872
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 11 deletions.
diff --git a/packages/docusaurus-theme-bootstrap/README.md 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
@@ -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>

diff --git 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 (
     <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}