From bf8997e834deccb8a82c2e409c02c210c8fded09 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Thu, 20 Feb 2020 21:22:58 +0800 Subject: [PATCH 1/3] docs(v2): Nav links activeBasePath --- .../templates/classic/docusaurus.config.js | 9 ++++++-- .../templates/facebook/docusaurus.config.js | 9 ++++++-- website/docs/docusaurus.config.js.md | 1 + website/docs/theme-classic.md | 23 ++++++++++--------- website/docusaurus.config.js | 2 +- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/docusaurus-init/templates/classic/docusaurus.config.js b/packages/docusaurus-init/templates/classic/docusaurus.config.js index 6614bbb619b8..53c8b1e582ce 100644 --- a/packages/docusaurus-init/templates/classic/docusaurus.config.js +++ b/packages/docusaurus-init/templates/classic/docusaurus.config.js @@ -14,8 +14,13 @@ module.exports = { src: 'img/logo.svg', }, links: [ - {to: 'docs/doc1', label: 'Docs', position: 'left'}, - {to: 'blog', label: 'Blog', position: 'left'}, + { + to: 'docs/doc1', + activeBasePath: 'docs', + label: 'Docs', + position: 'left', + }, + {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/facebook/docusaurus', label: 'GitHub', diff --git a/packages/docusaurus-init/templates/facebook/docusaurus.config.js b/packages/docusaurus-init/templates/facebook/docusaurus.config.js index d2065c3f2ab3..dd084b2e45f9 100644 --- a/packages/docusaurus-init/templates/facebook/docusaurus.config.js +++ b/packages/docusaurus-init/templates/facebook/docusaurus.config.js @@ -23,8 +23,13 @@ module.exports = { src: 'img/logo.svg', }, links: [ - {to: 'docs/doc1', label: 'Docs', position: 'left'}, - {to: 'blog', label: 'Blog', position: 'left'}, + { + to: 'docs/doc1', + activeBasePath: 'docs', + label: 'Docs', + position: 'left', + }, + {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, // Please keep GitHub link to the right for consistency. { href: 'https://github.com/facebook/docusaurus', diff --git a/website/docs/docusaurus.config.js.md b/website/docs/docusaurus.config.js.md index d0b3a622d42c..a74c5aae15b2 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 ff1b7d044234..4f2e0b362d98 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 a708a495b9ef..89105425f34c 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', }, From 9dba46ebe04cce9e8246f54fb3fbf1ac6943c899 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Thu, 20 Feb 2020 21:28:44 +0800 Subject: [PATCH 2/3] rename activeBaseRoute to activeBasePath --- packages/docusaurus-theme-classic/src/theme/Navbar/index.js | 6 +++--- website/docusaurus.config.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index d6c3895502b7..0462a7aa1966 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -21,11 +21,11 @@ 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 activeBaseUrl = useBaseUrl(activeBasePath); const activeBaseProps = - activeBaseRoute != null + activeBasePath != null ? { isActive: (_match, location) => location.pathname.startsWith(activeBaseUrl), diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 89105425f34c..6141029f86ea 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -99,7 +99,7 @@ module.exports = { label: 'Docs', position: 'left', }, - {to: 'blog', label: 'Blog', position: 'left'}, + {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, {to: 'showcase', label: 'Showcase', position: 'left'}, {to: 'feedback', label: 'Feedback', position: 'left'}, { From 16b5f1052adaffafdfb63d32867c8660b75cf5cf Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 21 Feb 2020 09:39:43 +0800 Subject: [PATCH 3/3] fixes --- .../templates/classic/docusaurus.config.js | 2 +- .../templates/facebook/docusaurus.config.js | 2 +- .../src/theme/Navbar/index.js | 14 ++++++-------- .../blog/2019-12-30-docusaurus-2019-recap.md | 2 +- website/docusaurus.config.js | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/docusaurus-init/templates/classic/docusaurus.config.js b/packages/docusaurus-init/templates/classic/docusaurus.config.js index 53c8b1e582ce..9ac4459def9a 100644 --- a/packages/docusaurus-init/templates/classic/docusaurus.config.js +++ b/packages/docusaurus-init/templates/classic/docusaurus.config.js @@ -20,7 +20,7 @@ module.exports = { label: 'Docs', position: 'left', }, - {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, + {to: 'blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/facebook/docusaurus', label: 'GitHub', diff --git a/packages/docusaurus-init/templates/facebook/docusaurus.config.js b/packages/docusaurus-init/templates/facebook/docusaurus.config.js index dd084b2e45f9..544d9becefd0 100644 --- a/packages/docusaurus-init/templates/facebook/docusaurus.config.js +++ b/packages/docusaurus-init/templates/facebook/docusaurus.config.js @@ -29,7 +29,7 @@ module.exports = { label: 'Docs', position: 'left', }, - {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, + {to: 'blog', label: 'Blog', position: 'left'}, // Please keep GitHub link to the right for consistency. { href: 'https://github.com/facebook/docusaurus', diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index 0462a7aa1966..cdc4f9946595 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -24,13 +24,6 @@ import styles from './styles.module.css'; function NavLink({activeBasePath, to, href, label, position, ...props}) { const toUrl = useBaseUrl(to); const activeBaseUrl = useBaseUrl(activeBasePath); - const activeBaseProps = - activeBasePath != null - ? { - isActive: (_match, location) => - location.pathname.startsWith(activeBaseUrl), - } - : {}; 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 28c6413fc9f1..7c867f5efa9d 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/docusaurus.config.js b/website/docusaurus.config.js index 6141029f86ea..89105425f34c 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -99,7 +99,7 @@ module.exports = { label: 'Docs', position: 'left', }, - {to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'left'}, + {to: 'blog', label: 'Blog', position: 'left'}, {to: 'showcase', label: 'Showcase', position: 'left'}, {to: 'feedback', label: 'Feedback', position: 'left'}, {