diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index 45d476e964..263265ec03 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -12,46 +12,43 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import SearchBar from '@theme/SearchBar'; +function NavLink(props) { + const {baseUrl, ...originalProps} = props; + return ( + + {originalProps.label} + + ); +} + function Navbar() { const context = useDocusaurusContext(); const {siteConfig = {}} = context; const { baseUrl, - headerIcon, - themeConfig: {algolia, headerLinks = []}, - title, - disableHeaderTitle, + themeConfig: {algolia, navbar = {}}, } = siteConfig; + const {title, logo, links} = navbar; - // function to generate each header link - const makeLinks = link => { - if (link.url) { - // internal link - const targetLink = `${baseUrl}${link.url}`; - return ( -
- - {link.label} - -
- ); + const getUrl = url => { + const externalRegex = /^(https?:|\/\/)/; + const internalRegex = /^\/(?!\/)/; + if (externalRegex.test(url) || internalRegex.test(url)) { + return url; } - - if (link.href) { - // Set link to specified href. - return ( -
- - {link.label} - -
- ); - } - - return null; + return baseUrl + url; }; return ( @@ -59,18 +56,31 @@ function Navbar() {
- {headerIcon && ( + {logo != null && ( {title} )} - {!disableHeaderTitle && {title}} + {title != null && {title}} - {headerLinks.map(makeLinks)} + {links + .filter(linkItem => linkItem.position !== 'right') + .map((linkItem, i) => ( +
+ +
+ ))}
+ {links + .filter(linkItem => linkItem.position === 'right') + .map((linkItem, i) => ( +
+ +
+ ))} {algolia && (
diff --git a/packages/docusaurus/CHANGES.md b/packages/docusaurus/CHANGES.md index 77f2618e3b..b527f0c420 100644 --- a/packages/docusaurus/CHANGES.md +++ b/packages/docusaurus/CHANGES.md @@ -7,19 +7,30 @@ - `docsUrl`. Use the plugin option on `docusaurus-plugin-content-docs` instead. - `customDocsPath`. Use the plugin option on `docusaurus-plugin-content-docs` instead. - `sidebars.json` now has to be explicitly loaded by users and passed into the the plugin option on `docusaurus-plugin-content-docs`. - - `headerLinks` doc, page, blog is deprecated. The syntax is now: + - `headerLinks` doc, page, blog is deprecated and has been to moved into `themeConfig` under the name `navbar`. The syntax is now: ```js -headerLinks: [ - // Link to internal page (without baseUrl) - { url: "help", label: "Help" }, - // Links to href destination/ external page - { href: "https://github.com/", label: "GitHub" }, -], +themeConfig: { + navbar: { + title: 'Docusaurus', + logo: { + alt: 'Docusaurus Logo', + src: 'img/docusaurus.svg', + }, + links: [ + {to: 'docs/introduction', label: 'Docs', position: 'left'}, + {to: 'blog', label: 'Blog', position: 'left'}, + {to: 'feedback', label: 'Feedback', position: 'left'}, + { + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', + }, + ], + }, +} ``` -- `headerLinks` is now moved to themeConfig - # Additions ### Presets diff --git a/packages/docusaurus/src/server/load/__tests__/__fixtures__/custom-site/docusaurus.config.js b/packages/docusaurus/src/server/load/__tests__/__fixtures__/custom-site/docusaurus.config.js index d317be1f91..7922779c51 100644 --- a/packages/docusaurus/src/server/load/__tests__/__fixtures__/custom-site/docusaurus.config.js +++ b/packages/docusaurus/src/server/load/__tests__/__fixtures__/custom-site/docusaurus.config.js @@ -12,7 +12,6 @@ module.exports = { projectName: 'sakura', baseUrl: '/sakura/', url: 'https://docusaurus.io', - headerIcon: 'img/docusaurus.svg', favicon: 'img/docusaurus.ico', plugins: [ { diff --git a/packages/docusaurus/src/server/load/__tests__/__fixtures__/simple-site/docusaurus.config.js b/packages/docusaurus/src/server/load/__tests__/__fixtures__/simple-site/docusaurus.config.js index 495f082c65..86e054660e 100644 --- a/packages/docusaurus/src/server/load/__tests__/__fixtures__/simple-site/docusaurus.config.js +++ b/packages/docusaurus/src/server/load/__tests__/__fixtures__/simple-site/docusaurus.config.js @@ -12,7 +12,6 @@ module.exports = { projectName: 'hello', baseUrl: '/', url: 'https://docusaurus.io', - headerIcon: 'img/docusaurus.svg', favicon: 'img/docusaurus.ico', plugins: [ { diff --git a/packages/docusaurus/src/server/load/__tests__/config.test.js b/packages/docusaurus/src/server/load/__tests__/config.test.js index 0a6eb205d9..1e9d9e9b9e 100644 --- a/packages/docusaurus/src/server/load/__tests__/config.test.js +++ b/packages/docusaurus/src/server/load/__tests__/config.test.js @@ -18,18 +18,17 @@ describe('loadConfig', () => { plugins: expect.any(Array), }, ` -Object { - "baseUrl": "/", - "favicon": "img/docusaurus.ico", - "headerIcon": "img/docusaurus.svg", - "organizationName": "endiliey", - "plugins": Any, - "projectName": "hello", - "tagline": "Hello World", - "title": "Hello", - "url": "https://docusaurus.io", -} -`, + Object { + "baseUrl": "/", + "favicon": "img/docusaurus.ico", + "organizationName": "endiliey", + "plugins": Any, + "projectName": "hello", + "tagline": "Hello World", + "title": "Hello", + "url": "https://docusaurus.io", + } + `, ); expect(config).not.toEqual({}); }); @@ -39,7 +38,7 @@ Object { expect(() => { loadConfig(siteDir); }).toThrowErrorMatchingInlineSnapshot( - `"The required field(s) 'favicon', 'headerIcon', 'organizationName', 'projectName', 'tagline', 'url' are missing from docusaurus.config.js"`, + `"The required field(s) 'favicon', 'organizationName', 'projectName', 'tagline', 'url' are missing from docusaurus.config.js"`, ); }); @@ -48,7 +47,7 @@ Object { expect(() => { loadConfig(siteDir); }).toThrowErrorMatchingInlineSnapshot( - `"The required field(s) 'favicon', 'headerIcon' are missing from docusaurus.config.js"`, + `"The required field(s) 'favicon' are missing from docusaurus.config.js"`, ); }); @@ -57,7 +56,7 @@ Object { expect(() => { loadConfig(siteDir); }).toThrowErrorMatchingInlineSnapshot( - `"The required field(s) 'baseUrl', 'favicon', 'headerIcon', 'organizationName', 'projectName', 'tagline', 'title', 'url' are missing from docusaurus.config.js"`, + `"The required field(s) 'baseUrl', 'favicon', 'organizationName', 'projectName', 'tagline', 'title', 'url' are missing from docusaurus.config.js"`, ); }); }); diff --git a/packages/docusaurus/src/server/load/config.js b/packages/docusaurus/src/server/load/config.js index bbbb79dc36..cda6749c89 100644 --- a/packages/docusaurus/src/server/load/config.js +++ b/packages/docusaurus/src/server/load/config.js @@ -14,7 +14,6 @@ const {CONFIG_FILE_NAME} = require('../../constants'); const REQUIRED_FIELDS = [ 'baseUrl', 'favicon', - 'headerIcon', 'organizationName', 'projectName', 'tagline', diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 0a1b6d2363..3bdd475944 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -12,7 +12,6 @@ module.exports = { projectName: 'docusaurus', baseUrl: '/', url: 'https://docusaurus-2.netlify.com', - headerIcon: 'img/docusaurus.svg', favicon: 'img/docusaurus.ico', themeConfig: { algolia: { @@ -20,11 +19,23 @@ module.exports = { indexName: 'docusaurus-2', algoliaOptions: {}, }, - headerLinks: [ - {url: 'docs/introduction', label: 'Docs'}, - {url: 'blog', label: 'Blog'}, - {url: 'feedback/', label: 'Feedback'}, - ], + navbar: { + title: 'Docusaurus', + logo: { + alt: 'Docusaurus Logo', + src: 'img/docusaurus.svg', + }, + links: [ + {to: 'docs/introduction', label: 'Docs', position: 'left'}, + {to: 'blog', label: 'Blog', position: 'left'}, + {to: 'feedback', label: 'Feedback', position: 'left'}, + { + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', + }, + ], + }, footer: { style: 'dark', links: [