Merge pull request #53 from facebookexperimental/header-links

Update headerLinks API

lib/core/BlogPageLayout.js

@@ -28,7 +28,6 @@ const BlogPageLayout = React.createClass({
     const page = this.props.metadata.page;
     return (
       <Site
-        section="blog"
         title="Blog"
         language="en"
         config={this.props.config}

lib/core/BlogPostLayout.js

@@ -18,7 +18,6 @@ class BlogPostLayout extends React.Component {
     return (
       <Site
         className="sideNavVisible"
-        section="blog"
         url={"blog/" + this.props.metadata.path}
         title={this.props.metadata.title}
         language={"en"}

lib/core/DocsLayout.js

@@ -23,7 +23,6 @@ class DocsLayout extends React.Component {
       <Site
         config={this.props.config}
         className="sideNavVisible"
-        section="docs"
         title={
           i18n
             ? translation[this.props.metadata.language]["localized-strings"][

lib/core/Site.js

@@ -63,7 +63,6 @@ class Site extends React.Component {
           <HeaderNav
             config={this.props.config}
             baseUrl={this.props.config.baseUrl}
-            section={this.props.section}
             title={this.props.config.title}
             language={this.props.language}
             version={this.props.version}

lib/core/nav/HeaderNav.js

@@ -13,6 +13,7 @@ const React = require("react");
 const fs = require("fs");
 const siteConfig = require(CWD + "/siteConfig.js");
 const translation = require("../../server/translation.js");
+const Metadata = require("../metadata.js");
 
 const ENABLE_TRANSLATION = fs.existsSync(CWD + "/languages.js");
 const ENABLE_VERSIONING = fs.existsSync(CWD + "/versions.json");
@@ -100,44 +101,50 @@ class HeaderNav extends React.Component {
     };
   }
 
-  makeInternalLinks(link) {
+  makeLinks(link) {
-    let updatedLink = link.href.replace(
+    let href;
-      /\/LANGUAGE\//,
+    if (link.search && this.props.config.algolia) {
-      "/" + this.props.language + "/"
+      return (
-    );
+        <li className="navSearchWrapper reactNavSearchWrapper">
-    if (this.props.version) {
+          <input id="search_input_react" type="text" placeholder="Search" />
-      updatedLink = updatedLink.replace(
+        </li>
-        /\/VERSION\//,
-        "/" + this.props.version + "/"
       );
-    } else {
+    } else if (link.languages) {
-      updatedLink = updatedLink.replace(/\/VERSION\//, "/");
+      return (
+        <LanguageDropDown
+          baseUrl={this.props.baseUrl}
+          language={this.props.language}
+        />
+      );
+    } else if (link.doc) {
+      let id;
+      if (!ENABLE_VERSIONING || this.props.version === "next") {
+        id = this.props.language + "-" + link.doc;
+      } else {
+        id =
+          this.props.language +
+          "-version-" +
+          (this.props.version || versions[0]) +
+          "-" +
+          link.doc;
+      }
+      href = this.props.config.baseUrl + Metadata[id].permalink;
+    } else if (link.page) {
+      if (fs.existsSync(CWD + "/pages/en/" + link.page + ".js")) {
+        href =
+          siteConfig.baseUrl + this.props.language + "/" + link.page + ".html";
+      } else {
+        href = siteConfig.baseUrl + link.page + ".html";
+      }
+    } else if (link.href) {
+      href = link.href;
     }
     return (
-      <li key={link.section}>
+      <li>
-        <a
+        <a href={href} target={link.external ? "_blank" : "_self"}>
-          href={updatedLink}
-          className={link.section === this.props.section ? "active" : ""}
-        >
           {translation[this.props.language]
-            ? translation[this.props.language]["localized-strings"][link.text]
+            ? translation[this.props.language]["localized-strings"][link.label]
-            : link.text}
+            : link.label}
-        </a>
-      </li>
-    );
-  }
-
-  makeExternalLinks(link) {
-    return (
-      <li key={link.section}>
-        <a
-          href={link.href}
-          className={link.section === this.props.section ? "active" : ""}
-          target={siteConfig.externalLinkTarget || "_self"}
-        >
-          {translation[this.props.language]
-            ? translation[this.props.language]["localized-strings"][link.text]
-            : link.text}
         </a>
       </li>
     );
@@ -174,30 +181,32 @@ class HeaderNav extends React.Component {
   }
 
   renderResponsiveNav() {
+    const headerLinks = this.props.config.headerLinks;
+    // add language drop down to end if location not specified
+    let languages = false;
+    headerLinks.forEach(link => {
+      if (link.languages) {
+        languages = true;
+      }
+    });
+    if (!languages) {
+      headerLinks.push({ languages: true });
+    }
+    // add search bar to end if location not specified
+    let search = false;
+    headerLinks.forEach(link => {
+      if (link.search) {
+        search = true;
+      }
+    });
+    if (!search && this.props.config.algolia) {
+      headerLinks.push({ search: true });
+    }
     return (
       <div className="navigationWrapper navigationSlider">
         <nav className="slidingNav">
           <ul className="nav-site nav-site-internal">
-            {this.props.config.headerLinksInternal.map(
+            {headerLinks.map(this.makeLinks, this)}
-              this.makeInternalLinks,
-              this
-            )}
-            <LanguageDropDown
-              baseUrl={this.props.baseUrl}
-              language={this.props.language}
-            />
-            {this.props.config.algolia &&
-              <li className="navSearchWrapper reactNavSearchWrapper">
-                <input
-                  id="search_input_react"
-                  type="text"
-                  placeholder="Search"
-                />
-              </li>}
-            {this.props.config.headerLinksExternal.map(
-              this.makeExternalLinks,
-              this
-            )}
           </ul>
         </nav>
       </div>

lib/write-translations.js

@@ -57,14 +57,11 @@ function execute() {
     }
   });
   /* look through header links for text to translate */
-  for (let i = 0; i < siteConfig.headerLinksInternal.length; i++) {
+  siteConfig.headerLinks.forEach(link => {
-    translations["localized-strings"][siteConfig.headerLinksInternal[i].text] =
+    if (link.label) {
-      siteConfig.headerLinksInternal[i].text;
+      translations["localized-strings"][link.label] = link.label;
-  }
+    }
-  for (let i = 0; i < siteConfig.headerLinksExternal.length; i++) {
+  });
-    translations["localized-strings"][siteConfig.headerLinksExternal[i].text] =
-      siteConfig.headerLinksExternal[i].text;
-  }
 
   /* find sidebar category titles to translate */
   Object.keys(sidebars).forEach(sb => {

website/siteConfig.js

@@ -26,19 +26,12 @@ const siteConfig = {
   users,
   editUrl:
     "https://github.com/facebookexperimental/docusaurus/edit/master/docs/",
-  headerLinksInternal: [
+  headerLinks: [
+    { doc: "installation", label: "Docs" },
+    { page: "help", label: "Help" },
     {
-      section: "docs",
-      href: "/docusaurus/docs/installation.html",
-      text: "Docs"
-    },
-    { section: "help", href: "/docusaurus/LANGUAGE/help.html", text: "Help" }
-  ],
-  headerLinksExternal: [
-    {
-      section: "github",
       href: "https://github.com/facebookexperimental/docusaurus",
-      text: "GitHub"
+      label: "GitHub"
     }
   ],
   headerIcon: "img/docusaurus.svg",
@@ -55,8 +48,7 @@ const siteConfig = {
   colors: {
     primaryColor: "#2E8555",
     secondaryColor: "#205C3B",
-    prismColor:
+    prismColor: "rgba(46, 133, 85, 0.03)"
-      "rgba(46, 133, 85, 0.03)"
   }
 };