feat(v2): move navbar config into themeConfig (#1477)

* feat(v2): move navbar config into themeConfig

* misc: fix tests

* fix: support external url for logo

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 (
+    <Link
+      className="navbar__link"
+      {...originalProps}
+      {...(originalProps.href
+        ? {
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            href: originalProps.href,
+          }
+        : {
+            activeClassName: 'navbar__link--active',
+            to: `${baseUrl}${originalProps.to}`,
+          })}>
+      {originalProps.label}
+    </Link>
+  );
+}
+
 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 (
-        <div key={targetLink} className="navbar__item">
-          <Link
-            activeClassName="navbar__link--active"
-            className="navbar__link"
-            to={targetLink}>
-            {link.label}
-          </Link>
-        </div>
-      );
+  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 (
-        <div key={link.label} className="navbar__item">
-          <Link to={link.href} className="navbar__link">
-            {link.label}
-          </Link>
-        </div>
-      );
-    }
-
-    return null;
+    return baseUrl + url;
   };
 
   return (
@@ -59,18 +56,31 @@ function Navbar() {
       <div className="navbar__inner">
         <div className="navbar__items">
           <Link className="navbar__brand" to={baseUrl}>
-            {headerIcon && (
+            {logo != null && (
               <img
                 className="navbar__logo"
-                src={baseUrl + headerIcon}
-                alt={title}
+                src={getUrl(logo.src)}
+                alt={logo.alt}
               />
             )}
-            {!disableHeaderTitle && <strong>{title}</strong>}
+            {title != null && <strong>{title}</strong>}
           </Link>
-          {headerLinks.map(makeLinks)}
+          {links
+            .filter(linkItem => linkItem.position !== 'right')
+            .map((linkItem, i) => (
+              <div className="navbar__item" key={i}>
+                <NavLink baseUrl={baseUrl} {...linkItem} />
+              </div>
+            ))}
         </div>
         <div className="navbar__items navbar__items--right">
+          {links
+            .filter(linkItem => linkItem.position === 'right')
+            .map((linkItem, i) => (
+              <div className="navbar__item" key={i}>
+                <NavLink baseUrl={baseUrl} {...linkItem} />
+              </div>
+            ))}
           {algolia && (
             <div className="navbar__search" key="search-box">
               <SearchBar />

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

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: [
     {

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: [
     {

packages/docusaurus/src/server/load/__tests__/config.test.js

@@ -18,18 +18,17 @@ describe('loadConfig', () => {
         plugins: expect.any(Array),
       },
       `
-Object {
+      Object {
         "baseUrl": "/",
         "favicon": "img/docusaurus.ico",
-  "headerIcon": "img/docusaurus.svg",
         "organizationName": "endiliey",
         "plugins": Any<Array>,
         "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"`,
     );
   });
 });

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',

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: [