Merge pull request #81 from ericnakagawa/master

Several Docusaurus, Website changes and enhancements.

.gitignore

@@ -2,4 +2,10 @@ node_modules
 .DS_Store
 lib/core/metadata.js
 lib/core/MetadataBlog.js
-yarn.lock
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+
+website/i18n/*
+!website/i18n/en.json

README.md

@@ -196,5 +196,5 @@ DEPLOY_USER=deltice GIT_USER=test-site-bot CIRCLE_PROJECT_USERNAME=deltice CIRCL
 
 ## More Information
 
-For details on how to set up translation support, read [here](/docs/en/translation.md).
+For details on how to set up translation support, read [here](/docs/en/guides-translation.md).
-For details on how to set up documentation search, read [here](/docs/en/search.md).
+For details on how to set up documentation search, read [here](/docs/en/guides-search.md).

crowdin.yaml

@@ -0,0 +1,49 @@
+project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID
+api_key_env: CROWDIN_DOCUSAURUS_API_KEY
+base_path: "./"
+preserve_hierarchy: true
+
+files:
+  -
+    source: '/docs/*.md'
+    translation: '/website/translated_docs/%locale%/%original_file_name%'
+    languages_mapping: &anchor
+      locale:
+        'af': 'af'
+        'ar': 'ar'
+        'bs-BA': 'bs-BA'
+        'ca': 'ca'
+        'cs': 'cs'
+        'da': 'da'
+        'de': 'de'
+        'el': 'el'
+        'es-ES': 'es-ES'
+        'fa': 'fa-IR'
+        'fi': 'fi'
+        'fr': 'fr'
+        'he': 'he'
+        'hu': 'hu'
+        'id': 'id-ID'
+        'it': 'it'
+        'ja': 'ja'
+        'ko': 'ko'
+        'mr': 'mr-IN'
+        'nl': 'nl'
+        'no': 'no-NO'
+        'pl': 'pl'
+        'pt-BR': 'pt-BR'
+        'pt-PT': 'pt-PT'
+        'ro': 'ro'
+        'ru': 'ru'
+        'sk': 'sk-SK'
+        'sr': 'sr'
+        'sv-SE': 'sv-SE'
+        'tr': 'tr'
+        'uk': 'uk'
+        'vi': 'vi'
+        'zh-CN': 'zh-Hans'
+        'zh-TW': 'zh-Hant'
+  -
+    source: '/website/i18n/en.json'
+    translation: '/website/i18n/%locale%.json'
+    languages_mapping: *anchor

docs/guides-translation.md

@@ -1,9 +1,9 @@
 ---
 id: translation
-title: Translations
+title: Translations & Localization
 ---
 
-Docusaurus allows for easy translation functionality using Crowdin. Documentation files written in English are uploaded to Crowdin for translation by users. Top-level pages written with English strings can be translated by wrapping any strings you want to translate in a `<translate>` tag. Other titles and labels will also be found and properly translated.
+Docusaurus allows for easy translation functionality using Crowdin. Documentation files written in English are uploaded to Crowdin for translation by users within a community. Top-level pages written with English strings can be translated by wrapping any strings you want to translate in a `<translate>` tag. Other titles and labels will also be found and properly translated.
 
 ## Docusaurus Translation Configurations
 
@@ -13,6 +13,12 @@ To generate example files for translations with Docusuaurus, run the `examples`
 npm run examples translations
 ```
 
+or
+
+```
+yarn examples translations
+```
+
 This will create the following files:
 
 ```
@@ -21,19 +27,30 @@ languages.js
 crowdin.yaml
 ```
 
-The `pages/en/help-with-translations.js` file is the same example help page generated by the `examples` script but now using translations tags that are described below.
+The `pages/en/help-with-translations.js` file includes the same starter help page generated by the `examples` script, but now includes translation tags.
+
 The `languages.js` file tells Docusaurus what languages you want to enable for your site.
-The `crowdin.yaml` file is used to configure crowdin integration, and is copied out one level into your project repo.
 
-## Writing Pages to be Translated
+The `crowdin.yaml` file is used to configure crowdin integration, and is copied up one level into your docusaurus project repo. If your docusaurus project resides in `/project/website`, then `crowdin.yaml` will be copied to `/project/crowdin.yaml`. 
 
-Any pages with text you want to be translated should go into the `website/pages/en` folder. Simply wrap any strings you want translated in a `<translate>` tag, and add the following `require` statement to the top of the file:
+## Translating Your Existing Docs
+
+Your documentation files do not need to be changed or moved to support translations. They will be uploaded to Crowdin to be translated directly.
+
+
+## Enabling Translations on Pages
+
+Pages allow you to customize layout and specific content of pages like a custom index page or help page.
+
+Pages with text that you want translated should be placed in `website/pages/en` folder.
+
+Wrap strings you want translated in a `<translate>` tag, and add the following `require` statement to the top of the file:
 ```jsx
 ...
 const translate = require("../../server/translate.js").translate;
 ...
 <h2>
-  <translate>This is a Header I want translated</translate>
+  <translate>This header will be translated</translate>
 </h2>
 ...
 ```
@@ -45,10 +62,10 @@ You can also include an optional description attribute to give more context to a
 <p>
 ```
 
-Documentation files do not need to be changed to support translations. They will be uploaded to Crowdin to be translated directly.
-
 ## Gathering Strings to Translate
 
+The strings within localized Pages must be extracted and provided to Crowdin.
+
 Add the following script to your package.json file:
 ```json
 ...
@@ -70,22 +87,47 @@ The script will include text from the following places:
 
 ## How Strings Get Translated
 
-Docusaurus itself does not do any translation from one language to another. Instead, it uses [Crowdin](https://crowdin.com/) to manage translations and then downloads appropriately translated files from Crowdin. More information on how to set up Crowdin translations later.
+Docusaurus itself does not do any translation from one language to another. Instead, it integrates [Crowdin](https://crowdin.com/) to upload translations and then downloads the appropriately translated files from Crowdin.
 
 ## How Docusaurus Uses String Translations
 
-This section provides some more context for how translation works, but is not necessary information for the user to know.
+This section provides context about how translations in Docusaurus works.
 
-For things like the strings found in the headers and sidebars of pages, Docusaurus references a translated version of `i18n/en.json` (for example, a `i18n/fr.json` file downloaded from Crowdin).
+### Strings
 
-For documentation text itself, fully translated markdown files will be compiled in the same way English documentation markdown files would be.
+A Docusaurus site has many strings used throughout it that require localization. However, maintaining a list of strings used through out a site can be laborious. Docusaurus simplies this by centralizing strings.
 
-For other pages, Docusaurus will automatically transform all `<translate>` tags into function calls that will return appropriately translated strings. For each language that is enabled with `languages.js`, Docusaurus will build translated pages using the files in `pages/en` and the language's respective `.json` file in `i18n`.
+The header navigation, for example can have links to 'Home' or your 'Blog'. This and other strings found in the headers and sidebars of pages are extracted and placed into `i18n/en.json`. When your files are translated, say into Spanish, a `i18n/fr.json` file will be downloaded from Crowdin. Then, when the Spanish pages are generated, Docusaurus will replace the English version of corresponding strings with translated strings from the corresponding localized strings file (e.g. In a Spanish enabled site 'Help' will become 'Ayuda').
 
-## Crowdin Set-Up
+### Markdown Files
+
+For documentation files themselves, translated versions of these files are downloaded and then rendered through the proper layout template.
+
+### Other Pages
+
+For other pages, Docusaurus will automatically transform all `<translate>` tags it finds into function calls that return the translated strings from corresponding localized _`locale`_`.json`.
+
+## Crowdin
 
 Create your translation project on [Crowdin](https://www.crowdin.com/). You can use [Crowdin's guides](https://support.crowdin.com/translation-process-overview/) to learn more about the translations work flow.
 
+### Manual File Sync
+
+You can add the following to your `package.json` to manually trigger crowdin. 
+
+```json
+"scripts": {
+  "crowdin-upload": "export CROWDIN_DOCUSAURUS_PROJECT_ID=$YOUR_CROWDIN_ID; export CROWDIN_DOCUSAURUS_API_KEY=$YOUR_CROWDIN_API_KEY; crowdin-cli --config ../crowdin.yaml upload sources --auto-update -b master",
+  "crowdin-download": "export CROWDIN_DOCUSAURUS_PROJECT_ID=$YOUR_CROWDIN_ID; export CROWDIN_DOCUSAURUS_API_KEY=$YOUR_CROWDIN_API_KEY; crowdin-cli --config ../crowdin.yaml download -b master"
+},
+```
+
+These commands require having an environment variable set with your crowdin project id and api key (`CROWDIN_PROJECT_ID`, `CROWDIN_API_KEY`). You can add them inline like above or add them permanently to your `.bashrc` or `.bash_profile`.
+
+If you run more than one localized Docusaurus project on your computer, you should change the name of the enviroment variables to something unique (`CROWDIN_DOCUSAURUS_PROJECT_ID`, `CROWDIN_DOCUSAURUS_API_KEY`).
+
+### Automated File Sync
+
 To automatically get the translations for your files, update the `circle.yml` file in your project directory to include steps to upload English files to be translated and download translated files using the Crowdin CLI. Here is an example `circle.yml` file:
 
 ```yaml
@@ -128,7 +170,11 @@ Now, Circle will help you automatically get translations prior to building your
 
 If you wish to use Crowdin on your machine locally, you can install the [Crowdin CLI tool](https://support.crowdin.com/cli-tool/) and run the same commands found in the `circle.yaml` file. The only difference is that you must set `project_identifier` and `api_key` values in the `crowdin.yaml` file since you will not have Circle environment variables set up. 
 
-## Translations and Versioning
+## Versioned Translations
+
+TODO - This section needs to be fleshed out.
+
+OLD -
 
 If you wish to have translation and versioning for your documentation, add the following section to the end of your `crowdin.yaml` file:
 

examples/basics/gitignore

@@ -1,5 +1,11 @@
-.DS_Store
 node_modules
-translated_docs
+.DS_Store
-i18n
+lib/core/metadata.js
-yarn.lock
+lib/core/MetadataBlog.js
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+
+website/i18n/*
+!website/i18n/en.json

examples/basics/siteConfig.js

@@ -34,6 +34,8 @@ const siteConfig = {
   headerIcon: "img/docusaurus.svg",
   footerIcon: "img/docusaurus.svg",
   favicon: "img/favicon.png",
+  /* the name of your custom css file that resides in static/css/ */ 
+  // customCssFileName: "custom.css",
   /* colors for website */
   colors: {
     primaryColor: "#2E8555",

examples/basics/static/css/custom.css

@@ -0,0 +1,16 @@
+/* your custom css */
+
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+}
+
+@media only screen and (min-width: 1024px) {
+}
+
+@media only screen and (max-width: 1023px) {
+}
+
+@media only screen and (min-width: 1400px) {
+}
+
+@media only screen and (min-width: 1500px) {
+}

examples/translations/crowdin.yaml

@@ -1,11 +1,11 @@
-project_identifier_env: CROWDIN_PROJECT_ID
+project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID
-api_key_env: CROWDIN_API_KEY
+api_key_env: CROWDIN_DOCUSAURUS_API_KEY
 base_path: "./"
 preserve_hierarchy: true
 
 files:
   -
-    source: '/docs/en/*.md'
+    source: '/docs/*.md'
     translation: '/website/translated_docs/%locale%/%original_file_name%'
     languages_mapping: &anchor
       locale:

examples/translations/languages.js

@@ -1,14 +1,14 @@
 const languages = [
-  {
-    enabled: false,
-    name: "日本語",
-    tag: "ja"
-  },
   {
     enabled: true,
     name: "English",
     tag: "en"
   },
+  {
+    enabled: false,
+    name: "日本語",
+    tag: "ja"
+  },
   {
     enabled: false,
     name: "العربية",

lib/core/Head.js

@@ -43,6 +43,11 @@ class Head extends React.Component {
           rel="stylesheet"
           href={this.props.config.baseUrl + "css/main.css"}
         />
+        {this.props.config.customCssFileName &&
+          <link
+            rel="stylesheet"
+            href={this.props.config.baseUrl + "css/" + this.props.config.customCssFileName}
+          />}
         <script async defer src="https://buttons.github.io/buttons.js" />
       </head>
     );

lib/core/Marked.js

@@ -10,6 +10,7 @@
 /* Marked component is used to parse markdown to html */
 
 const React = require("react");
+import DOM from 'react-dom-factories';
 const Prism = require("./Prism.js");
 const Header = require("./Header.js");
 
@@ -565,7 +566,7 @@ InlineLexer.prototype.output = function(src) {
         text = cap[1];
         href = text;
       }
-      out.push(React.DOM.a({ href: this.sanitizeUrl(href) }, text));
+      out.push(DOM.a({ href: this.sanitizeUrl(href) }, text));
       continue;
     }
 
@@ -574,7 +575,7 @@ InlineLexer.prototype.output = function(src) {
       src = src.substring(cap[0].length);
       text = cap[1];
       href = text;
-      out.push(React.DOM.a({ href: this.sanitizeUrl(href) }, text));
+      out.push(DOM.a({ href: this.sanitizeUrl(href) }, text));
       continue;
     }
 
@@ -618,35 +619,35 @@ InlineLexer.prototype.output = function(src) {
     // strong
     if ((cap = this.rules.strong.exec(src))) {
       src = src.substring(cap[0].length);
-      out.push(React.DOM.strong(null, this.output(cap[2] || cap[1])));
+      out.push(DOM.strong(null, this.output(cap[2] || cap[1])));
       continue;
     }
 
     // em
     if ((cap = this.rules.em.exec(src))) {
       src = src.substring(cap[0].length);
-      out.push(React.DOM.em(null, this.output(cap[2] || cap[1])));
+      out.push(DOM.em(null, this.output(cap[2] || cap[1])));
       continue;
     }
 
     // code
     if ((cap = this.rules.code.exec(src))) {
       src = src.substring(cap[0].length);
-      out.push(React.DOM.code(null, cap[2]));
+      out.push(DOM.code(null, cap[2]));
       continue;
     }
 
     // br
     if ((cap = this.rules.br.exec(src))) {
       src = src.substring(cap[0].length);
-      out.push(React.DOM.br(null, null));
+      out.push(DOM.br(null, null));
       continue;
     }
 
     // del (gfm)
     if ((cap = this.rules.del.exec(src))) {
       src = src.substring(cap[0].length);
-      out.push(React.DOM.del(null, this.output(cap[1])));
+      out.push(DOM.del(null, this.output(cap[1])));
       continue;
     }
 
@@ -695,7 +696,7 @@ InlineLexer.prototype.outputLink = function(cap, link) {
     const shouldOpenInNewWindow =
       link.href.charAt(0) !== "/" && link.href.charAt(0) !== "#";
 
-    return React.DOM.a(
+    return DOM.a(
       {
         href: this.sanitizeUrl(link.href),
         title: link.title,
@@ -704,7 +705,7 @@ InlineLexer.prototype.outputLink = function(cap, link) {
       this.output(cap[1])
     );
   } else {
-    return React.DOM.img(
+    return DOM.img(
       {
         src: this.sanitizeUrl(link.href),
         alt: cap[1],
@@ -806,7 +807,7 @@ Parser.prototype.tok = function() {
       return [];
     }
     case "hr": {
-      return React.DOM.hr(null, null);
+      return DOM.hr(null, null);
     }
     case "heading": {
       return (
@@ -835,7 +836,7 @@ Parser.prototype.tok = function() {
       for (i = 0; i < this.token.header.length; i++) {
         heading = this.inline.output(this.token.header[i]);
         row.push(
-          React.DOM.th(
+          DOM.th(
             this.token.align[i]
               ? { style: { textAlign: this.token.align[i] } }
               : null,
@@ -843,7 +844,7 @@ Parser.prototype.tok = function() {
           )
         );
       }
-      table.push(React.DOM.thead(null, React.DOM.tr(null, row)));
+      table.push(DOM.thead(null, DOM.tr(null, row)));
 
       // body
       for (i = 0; i < this.token.cells.length; i++) {
@@ -851,7 +852,7 @@ Parser.prototype.tok = function() {
         cells = this.token.cells[i];
         for (j = 0; j < cells.length; j++) {
           row.push(
-            React.DOM.td(
+            DOM.td(
               this.token.align[j]
                 ? { style: { textAlign: this.token.align[j] } }
                 : null,
@@ -859,11 +860,11 @@ Parser.prototype.tok = function() {
             )
           );
         }
-        body.push(React.DOM.tr(null, row));
+        body.push(DOM.tr(null, row));
       }
-      table.push(React.DOM.thead(null, body));
+      table.push(DOM.thead(null, body));
 
-      return React.DOM.table(null, table);
+      return DOM.table(null, table);
     }
     case "blockquote_start": {
       const body = [];
@@ -872,7 +873,7 @@ Parser.prototype.tok = function() {
         body.push(this.tok());
       }
 
-      return React.DOM.blockquote(null, body);
+      return DOM.blockquote(null, body);
     }
     case "list_start": {
       const type = this.token.ordered ? "ol" : "ul";
@@ -882,7 +883,7 @@ Parser.prototype.tok = function() {
         body.push(this.tok());
       }
 
-      return React.DOM[type](null, body);
+      return DOM[type](null, body);
     }
     case "list_item_start": {
       const body = [];
@@ -891,7 +892,7 @@ Parser.prototype.tok = function() {
         body.push(this.token.type === "text" ? this.parseText() : this.tok());
       }
 
-      return React.DOM.li(null, body);
+      return DOM.li(null, body);
     }
     case "loose_item_start": {
       const body = [];
@@ -900,10 +901,10 @@ Parser.prototype.tok = function() {
         body.push(this.tok());
       }
 
-      return React.DOM.li(null, body);
+      return DOM.li(null, body);
     }
     case "html": {
-      return React.DOM.div({
+      return DOM.div({
         dangerouslySetInnerHTML: {
           __html: this.token.text
         }
@@ -915,12 +916,12 @@ Parser.prototype.tok = function() {
             null,
             this.inline.output(this.token.text)
           )
-        : React.DOM.p(null, this.inline.output(this.token.text));
+        : DOM.p(null, this.inline.output(this.token.text));
     }
     case "text": {
       return this.options.paragraphFn
         ? this.options.paragraphFn.call(null, this.parseText())
-        : React.DOM.p(null, this.parseText());
+        : DOM.p(null, this.parseText());
     }
   }
 };
@@ -1045,8 +1046,8 @@ function marked(src, opt, callback) {
     e.message += "\nPlease report this to https://github.com/chjj/marked.";
     if ((opt || marked.defaults).silent) {
       return [
-        React.DOM.p(null, "An error occurred:"),
+        DOM.p(null, "An error occurred:"),
-        React.DOM.pre(null, e.message)
+        DOM.pre(null, e.message)
       ];
     }
     throw e;

lib/core/nav/HeaderNav.js

@@ -61,7 +61,7 @@ class LanguageDropDown extends React.Component {
 
     return (
       <span>
-        <li>
+        <li key="languages">
           <a id="languages-menu" href="#">
             <img
               className="languages-icon"
@@ -109,7 +109,7 @@ class HeaderNav extends React.Component {
     if (link.search && this.props.config.algolia) {
       // return algolia search bar
       return (
-        <li className="navSearchWrapper reactNavSearchWrapper">
+        <li className="navSearchWrapper reactNavSearchWrapper" key="search">
           <input id="search_input_react" type="text" placeholder="Search" />
         </li>
       );
@@ -119,6 +119,7 @@ class HeaderNav extends React.Component {
         <LanguageDropDown
           baseUrl={this.props.baseUrl}
           language={this.props.language}
+          key="languagedropdown"
         />
       );
     } else if (link.doc) {
@@ -157,7 +158,7 @@ class HeaderNav extends React.Component {
       href = this.props.baseUrl + "blog";
     }
     return (
-      <li>
+      <li key={link.label + "page"}>
         <a href={href} target={link.external ? "_blank" : "_self"}>
           {translation[this.props.language]
             ? translation[this.props.language]["localized-strings"][link.label]
@@ -178,7 +179,10 @@ class HeaderNav extends React.Component {
         <div className="headerWrapper wrapper">
           <header>
             <a href={this.props.baseUrl}>
-              <img src={this.props.baseUrl + siteConfig.headerIcon} />
+              <img
+                className="logo"
+                src={this.props.baseUrl + siteConfig.headerIcon}
+              />
               {!this.props.config.disableHeaderTitle &&
                 <h2>
                   {this.props.title}

package.json

@@ -15,6 +15,7 @@
     "prettier": "^1.5.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-dom-factories": "^1.0.1",
     "request": "^2.81.0",
     "shelljs": "^0.7.8"
   },

website/i18n/en.json

@@ -0,0 +1,29 @@
+{
+  "localized-strings": {
+    "next": "Next",
+    "previous": "Previous",
+    "tagline": "Easy to Maintain Open Source Documentation Websites",
+    "commands": "CLI Commands",
+    "doc-markdown": "Markdown Features",
+    "api-pages": "Pages and Styles",
+    "site-config": "siteConfig.js",
+    "installation": "Installation",
+    "site-preparation": "Site Preparation",
+    "site-creation": "Creating your site",
+    "getting-started": "getting-started",
+    "blog": "Adding a Blog",
+    "custom-pages": "Custom Pages",
+    "navigation": "Navigation and Sidebars",
+    "search": "Enabling Search",
+    "translation": "Translations & Localization",
+    "versioning": "Versioning",
+    "Docs": "Docs",
+    "Help": "Help",
+    "Blog": "Blog",
+    "GitHub": "GitHub",
+    "Getting Started": "Getting Started",
+    "Guides": "Guides",
+    "API": "API"
+  },
+  "pages-strings": {}
+}

website/languages.js

@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+const languages = [
+  {
+    enabled: true,
+    name: "English",
+    tag: "en"
+  },
+  {
+    enabled: false,
+    name: "日本語",
+    tag: "ja"
+  },
+  {
+    enabled: false,
+    name: "العربية",
+    tag: "ar"
+  },
+  {
+    enabled: false,
+    name: "Bosanski",
+    tag: "bs-BA"
+  },
+  {
+    enabled: false,
+    name: "Català",
+    tag: "ca"
+  },
+  {
+    enabled: false,
+    name: "Čeština",
+    tag: "cs"
+  },
+  {
+    enabled: false,
+    name: "Dansk",
+    tag: "da"
+  },
+  {
+    enabled: false,
+    name: "Deutsch",
+    tag: "de"
+  },
+  {
+    enabled: false,
+    name: "Ελληνικά",
+    tag: "el"
+  },
+  {
+    enabled: false,
+    name: "Español",
+    tag: "es-ES"
+  },
+  {
+    enabled: false,
+    name: "فارسی",
+    tag: "fa-IR"
+  },
+  {
+    enabled: false,
+    name: "Suomi",
+    tag: "fi"
+  },
+  {
+    enabled: false,
+    name: "Français",
+    tag: "fr"
+  },
+  {
+    enabled: false,
+    name: "עִברִית",
+    tag: "he"
+  },
+  {
+    enabled: false,
+    name: "Magyar",
+    tag: "hu"
+  },
+  {
+    enabled: false,
+    name: "Bahasa Indonesia",
+    tag: "id-ID"
+  },
+  {
+    enabled: false,
+    name: "Italiano",
+    tag: "it"
+  },
+  {
+    enabled: false,
+    name: "Afrikaans",
+    tag: "af"
+  },
+  {
+    enabled: false,
+    name: "한국어",
+    tag: "ko"
+  },
+  {
+    enabled: false,
+    name: "मराठी",
+    tag: "mr-IN"
+  },
+  {
+    enabled: false,
+    name: "Nederlands",
+    tag: "nl"
+  },
+  {
+    enabled: false,
+    name: "Norsk",
+    tag: "no-NO"
+  },
+  {
+    enabled: false,
+    name: "Polskie",
+    tag: "pl"
+  },
+  {
+    enabled: false,
+    name: "Português",
+    tag: "pt-PT"
+  },
+  {
+    enabled: false,
+    name: "Português (Brasil)",
+    tag: "pt-BR"
+  },
+  {
+    enabled: false,
+    name: "Română",
+    tag: "ro"
+  },
+  {
+    enabled: false,
+    name: "Русский",
+    tag: "ru"
+  },
+  {
+    enabled: false,
+    name: "Slovenský",
+    tag: "sk-SK"
+  },
+  {
+    enabled: false,
+    name: "Српски језик (Ћирилица)",
+    tag: "sr"
+  },
+  {
+    enabled: false,
+    name: "Svenska",
+    tag: "sv-SE"
+  },
+  {
+    enabled: false,
+    name: "Türkçe",
+    tag: "tr"
+  },
+  {
+    enabled: false,
+    name: "Українська",
+    tag: "uk"
+  },
+  {
+    enabled: false,
+    name: "Tiếng Việt",
+    tag: "vi"
+  },
+  {
+    enabled: false,
+    name: "中文",
+    tag: "zh-Hans"
+  },
+  { enabled: false, name: "繁體中文", tag: "zh-Hant" }
+];
+module.exports = languages;

website/package.json

@@ -1,10 +1,13 @@
 {
-  "scripts": {
+	"scripts": {
-    "start": "../lib/start-server.js",
+		"start": "docusaurus-start",
-    "build": "../lib/build-files.js",
+		"build": "docusaurus-build",
-    "publish-gh-pages": "../lib/publish-gh-pages.js",
+		"publish-gh-pages": "docusaurus-publish",
-    "examples": "../lib/copy-examples.js",
+		"examples": "docusaurus-examples",
-    "write-translations": "../lib/write-translations.js",
+		"write-translations": "docusaurus-write-translations",
-    "version": "../lib/version.js"
+		"version": "docusaurus-version",
-  }
+		"rename-version": "docusaurus-rename-version",
+		"crowdin-upload": "crowdin-cli --config ../crowdin.yaml upload sources --auto-update -b master",
+		"crowdin-download": "crowdin-cli --config ../crowdin.yaml download -b master"
+	}
 }

website/pages/en/index.js

@@ -76,9 +76,9 @@ class Index extends React.Component {
       .filter(user => {
         return user.pinned;
       })
-      .map(user => {
+      .map((user, i) => {
         return (
-          <a href={user.infoLink}>
+          <a href={user.infoLink} key={i}>
             <img src={user.image} title={user.caption} />
           </a>
         );

website/siteConfig.js

@@ -31,7 +31,7 @@ const users = [
 
 const siteConfig = {
   title: "Docusaurus",
-  tagline: "Open Source Documentation Websites",
+  tagline: "Easy to Maintain Open Source Documentation Websites",
   url: "https://docusaurus.io",
   baseUrl: "/",
   projectName: "Docusaurus",
@@ -42,6 +42,8 @@ const siteConfig = {
   headerLinks: [
     { doc: "installation", label: "Docs" },
     { page: "help", label: "Help" },
+    { blog: true, label: "Blog" },
+    { languages: false },
     {
       href: "https://github.com/facebookexperimental/docusaurus",
       label: "GitHub"
@@ -56,6 +58,7 @@ const siteConfig = {
     apiKey: "3eb9507824b8be89e7a199ecaa1a9d2c",
     indexName: "docusaurus"
   },
+  customCssFileName: "custom.css", //the name of your custom css file
   colors: {
     primaryColor: "#2E8555",
     secondaryColor: "#205C3B",