From 787b073bb7679f374a59208bfc0d75c852fd23c0 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 21 Feb 2020 09:44:14 +0800 Subject: [PATCH] docs(v2): nav links activeBasePath (#2303) * docs(v2): Nav links activeBasePath * rename activeBaseRoute to activeBasePath * fixes --- .../templates/classic/docusaurus.config.js | 7 +++++- .../templates/facebook/docusaurus.config.js | 7 +++++- .../src/theme/Navbar/index.js | 18 +++++++-------- .../blog/2019-12-30-docusaurus-2019-recap.md | 2 +- website/docs/docusaurus.config.js.md | 1 + website/docs/theme-classic.md | 23 ++++++++++--------- website/docusaurus.config.js | 2 +- 7 files changed, 35 insertions(+), 25 deletions(-) diff --git a/packages/docusaurus-init/templates/classic/docusaurus.config.js b/packages/docusaurus-init/templates/classic/docusaurus.config.js index 6614bbb619..9ac4459def 100644 --- a/packages/docusaurus-init/templates/classic/docusaurus.config.js +++ b/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', diff --git a/packages/docusaurus-init/templates/facebook/docusaurus.config.js b/packages/docusaurus-init/templates/facebook/docusaurus.config.js index d2065c3f2a..544d9becef 100644 --- a/packages/docusaurus-init/templates/facebook/docusaurus.config.js +++ b/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. { diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index d6c3895502..cdc4f99465 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/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 ( + location.pathname.startsWith(activeBaseUrl), + } + : null), })} {...props}> {label} diff --git a/website-1.x/blog/2019-12-30-docusaurus-2019-recap.md b/website-1.x/blog/2019-12-30-docusaurus-2019-recap.md index 28c6413fc9..7c867f5efa 100644 --- a/website-1.x/blog/2019-12-30-docusaurus-2019-recap.md +++ b/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. diff --git a/website/docs/docusaurus.config.js.md b/website/docs/docusaurus.config.js.md index d0b3a622d4..a74c5aae15 100644 --- a/website/docs/docusaurus.config.js.md +++ b/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', }, diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index ff1b7d0442..4f2e0b362d 100644 --- a/website/docs/theme-classic.md +++ b/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 = { ... diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index a708a495b9..89105425f3 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -95,7 +95,7 @@ module.exports = { }, { to: 'docs/introduction', - activeBaseRoute: 'docs', + activeBasePath: 'docs', label: 'Docs', position: 'left', },