docs(v2): nav links activeBasePath (#2303)

* docs(v2): Nav links activeBasePath

* rename activeBaseRoute to activeBasePath

* fixes

Author: yangshun

packages/docusaurus-init/templates/classic/docusaurus.config.js

@@ -14,7 +14,12 @@ module.exports = {
         src: 'img/logo.svg',
       },
       links: [
-        {to: 'docs/doc1', label: 'Docs', position: 'left'},
+        {
+          to: 'docs/doc1',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'left',
+        },
         {to: 'blog', label: 'Blog', position: 'left'},
         {
           href: 'https://github.com/facebook/docusaurus',

packages/docusaurus-init/templates/facebook/docusaurus.config.js

@@ -23,7 +23,12 @@ module.exports = {
         src: 'img/logo.svg',
       },
       links: [
-        {to: 'docs/doc1', label: 'Docs', position: 'left'},
+        {
+          to: 'docs/doc1',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'left',
+        },
         {to: 'blog', label: 'Blog', position: 'left'},
         // Please keep GitHub link to the right for consistency.
         {

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -21,16 +21,9 @@ import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 
 import styles from './styles.module.css';
 
-function NavLink({activeBaseRoute, to, href, label, position, ...props}) {
+function NavLink({activeBasePath, to, href, label, position, ...props}) {
   const toUrl = useBaseUrl(to);
-  const activeBaseUrl = useBaseUrl(activeBaseRoute);
-  const activeBaseProps =
-    activeBaseRoute != null
-      ? {
-          isActive: (_match, location) =>
-            location.pathname.startsWith(activeBaseUrl),
-        }
-      : {};
+  const activeBaseUrl = useBaseUrl(activeBasePath);
 
   return (
     <Link
@@ -44,7 +37,12 @@ function NavLink({activeBaseRoute, to, href, label, position, ...props}) {
         : {
             activeClassName: 'navbar__link--active',
             to: toUrl,
-            ...activeBaseProps,
+            ...(activeBasePath
+              ? {
+                  isActive: (_match, location) =>
+                    location.pathname.startsWith(activeBaseUrl),
+                }
+              : null),
           })}
       {...props}>
       {label}

website-1.x/blog/2019-12-30-docusaurus-2019-recap.md

@@ -16,7 +16,7 @@ tags: [recap]
 
 In 2018, we proposed to rebuild [Docusaurus from the ground up](https://github.com/facebook/docusaurus/issues/789). It involved a major rearchitecture effort - we created a content-centric CSS framework from scratch, a plugins system, and moved from static HTML pages to be a single page-app with prerendered routes. It was a wild adventure and a tough feat, especially with no dedicated FTE working on the project. With the help of [@endilie](https://github.com/endiliey), our ex-intern-turned-contributor-turned-maintainer, we made really good progress on D2 and are currently on version 2.0.0-alpha.40. All features in Docusaurus 1 except for translations have been ported over.
 
-D2's killer features are **Dark Mode** and its **superb performance**. D2 has dark mode support out-of-the-box and its near effortless to create a dark mode-friendly documentation site. Endilie put in great effort into optimizing the performance of the site and a bunch of performance optimization tricks have been done under the hood by default - optimized images, prerendering every route to static HTML and client-side routing thereafter, prefetching assets needed by future navigations whenever the user hovers over a navigation link, etc.
+D2's killer features are **Dark Mode** and its **superb performance**. D2 has dark mode support out-of-the-box and it is near effortless to create a dark mode-friendly documentation site. Endilie put in great effort into optimizing the performance of the site and a bunch of performance optimization tricks have been done under the hood by default - optimized images, prerendering every route to static HTML and client-side routing thereafter, prefetching assets needed by future navigations whenever the user hovers over a navigation link, etc.
 
 Last but not least, we implemented a plugins architecture and turned the repo into a [Lerna monorepo](https://github.com/facebook/docusaurus/tree/master/packages). We believe this plugin architecture will be helpful towards building a community and also allowing users to build their own features for their unique use cases.
 

website/docs/docusaurus.config.js.md

@@ -163,6 +163,7 @@ module.exports = {
       links: [
         {
           to: 'docs/docusaurus.config.js',
+          activeBasePath: 'docs',
           label: 'docusaurus.config.js',
           position: 'left',
         },

website/docs/theme-classic.md

@@ -11,7 +11,7 @@ title: '@docusaurus/theme-classic'
 
 To remove the ability to switch on dark mode, there is an option `themeConfig.disableDarkMode`, which is implicitly set to `false`.
 
-```js
+```js {5}
 // docusaurus.config.js
 module.exports = {
   ...
@@ -26,15 +26,13 @@ module.exports = {
 
 You can configure a default image that will be used for your meta tag, in particular `og:image` and `twitter:image`.
 
-```js
+```js {5-7}
 // docusaurus.config.js
 module.exports = {
   ...
   themeConfig: {
-    /**
-     * Relative to your site's "static" directory.
-     * Cannot be SVGs. Can be external URLs too.
-     */
+    // Relative to your site's "static" directory.
+    // Cannot be SVGs. Can be external URLs too.
     image: 'img/docusaurus.png',
     ...
   },
@@ -47,7 +45,7 @@ module.exports = {
 
 You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. You can also set a different logo for dark mode.
 
-```js
+```js {6-12}
 // docusaurus.config.js
 module.exports = {
   ...
@@ -70,7 +68,7 @@ module.exports = {
 
 You can add links to the navbar via `themeConfig.navbar.links`:
 
-```js
+```js {6-16}
 // docusaurus/config.js
 module.exports = {
   ...
@@ -81,6 +79,9 @@ module.exports = {
           to: 'docs/docusaurus.config.js',
           label: 'docusaurus.config.js',
           position: 'left',
+          // To apply the active class styling on all
+          // routes starting with this path.
+          activeBasePath: 'docs',
         },
         // ... other links
       ],
@@ -90,13 +91,13 @@ module.exports = {
 }
 ```
 
-Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.
+Outbound links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
 
 ### Auto-hide sticky navbar
 
 You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.
 
-```js
+```js {6}
 // docusaurus/config.js
 module.exports = {
   ...
@@ -137,7 +138,7 @@ module.exports = {
 
 You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid [language name](https://prismjs.com/#supported-languages) must be passed, e.g.:
 
-```js
+```js {6}
 // docusaurus/config.js
 module.exports = {
   ...

website/docusaurus.config.js

@@ -95,7 +95,7 @@ module.exports = {
         },
         {
           to: 'docs/introduction',
-          activeBaseRoute: 'docs',
+          activeBasePath: 'docs',
           label: 'Docs',
           position: 'left',
         },