Merge translation.js into env/Translation

* Add method to access localized strings * Add deprecation warning for old api usage * Implement translation fallbacks * Ensure setLanguage called before any rendering
facebook · Sep 5, 2018 · d5e5aee · d5e5aee
1 parent dc7e3aa
commit d5e5aee
Show file tree

Hide file tree

Showing 21 changed files with 408 additions and 293 deletions.
diff --git a/lib/core/Doc.js b/lib/core/Doc.js
@@ -10,18 +10,18 @@ const MarkdownBlock = require('./MarkdownBlock.js');
 
 const translate = require('../server/translate.js').translate;
 
-const editThisDoc = translate(
-  'Edit this Doc|recruitment message asking to edit the doc source'
-);
-const translateThisDoc = translate(
-  'Translate this Doc|recruitment message asking to translate the docs'
-);
-
 // inner doc component for article itself
 class Doc extends React.Component {
   render() {
     let docSource = this.props.source;
 
+    const editThisDoc = translate(
+      'Edit this Doc|recruitment message asking to edit the doc source'
+    );
+    const translateThisDoc = translate(
+      'Translate this Doc|recruitment message asking to translate the docs'
+    );
+
     if (this.props.version && this.props.version !== 'next') {
       // If versioning is enabled and the current version is not next, we need to trim out "version-*" from the source if we want a valid edit link.
       docSource = docSource.match(new RegExp(/version-.*\/(.*\.md)/, 'i'))[1];

diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
@@ -17,7 +17,7 @@ const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
 const docs = require('../server/docs.js');
-const {idx, getGitLastUpdated} = require('./utils.js');
+const {getGitLastUpdated} = require('./utils.js');
 
 // component used to generate whole webpage for docs, including sidebar/header/footer
 class DocsLayout extends React.Component {
@@ -37,10 +37,10 @@ class DocsLayout extends React.Component {
   render() {
     const metadata = this.props.metadata;
     const content = this.props.children;
-    const i18n = translation[metadata.language];
     const id = metadata.localized_id;
     const defaultTitle = metadata.title;
     let DocComponent = Doc;
+
     if (this.props.Doc) {
       DocComponent = this.props.Doc;
     }
@@ -50,19 +50,18 @@ class DocsLayout extends React.Component {
       updateTime = getGitLastUpdated(filepath);
     }
 
-    const title =
-      idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
+    const title = translation.t(['docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
 
     const previousTitle =
-      idx(i18n, ['localized-strings', metadata.previous_id]) ||
-      idx(i18n, ['localized-strings', 'previous']) ||
+      translation.t(metadata.previous_id) ||
       metadata.previous_title ||
+      translation.t('previous') ||
       'Previous';
     const nextTitle =
-      idx(i18n, ['localized-strings', metadata.next_id]) ||
-      idx(i18n, ['localized-strings', 'next']) ||
+      translation.t(metadata.next_id) ||
       metadata.next_title ||
+      translation.t('next') ||
       'Next';
 
     return (

diff --git a/lib/core/Redirect.js b/lib/core/Redirect.js
@@ -8,14 +8,11 @@
 const React = require('react');
 const Head = require('./Head.js');
 const translation = require('../server/translation.js');
-const {idx} = require('./utils.js');
 
 // Component used to provide same head, header, footer, other scripts to all pages
 class Redirect extends React.Component {
   render() {
-    const tagline =
-      idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
-      this.props.config.tagline;
+    const tagline = translation.t('tagline') || this.props.config.tagline;
     const title = this.props.title
       ? `${this.props.title} · ${this.props.config.title}`
       : (!this.props.config.disableTitleTagline &&

diff --git a/lib/core/Site.js b/lib/core/Site.js
@@ -8,22 +8,19 @@
 const React = require('react');
 const fs = require('fs');
 
+const CWD = process.cwd();
+
 const HeaderNav = require('./nav/HeaderNav.js');
 const Head = require('./Head.js');
 
-const Footer = require(`${process.cwd()}/core/Footer.js`);
+const Footer = require(`${CWD}/core/Footer.js`);
 const translation = require('../server/translation.js');
 const constants = require('./constants');
-const {idx} = require('./utils.js');
-
-const CWD = process.cwd();
 
 // Component used to provide same head, header, footer, other scripts to all pages
 class Site extends React.Component {
   render() {
-    const tagline =
-      idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
-      this.props.config.tagline;
+    const tagline = translation.t('tagline') || this.props.config.tagline;
     const title = this.props.title
       ? `${this.props.title} · ${this.props.config.title}`
       : (!this.props.config.disableTitleTagline &&

diff --git a/lib/core/nav/HeaderNav.js b/lib/core/nav/HeaderNav.js
@@ -12,29 +12,25 @@ const fs = require('fs');
 const classNames = require('classnames');
 
 const siteConfig = require(`${CWD}/siteConfig.js`);
+const {versioning} = require('../../server/env.js');
 const translation = require('../../server/translation.js');
-const env = require('../../server/env.js');
-
-const translate = require('../../server/translate.js').translate;
-const setLanguage = require('../../server/translate.js').setLanguage;
-
+const {translate} = require('../../server/translate.js');
 const readMetadata = require('../../server/readMetadata.js');
 
 readMetadata.generateMetadataDocs();
 const Metadata = require('../metadata.js');
-const {idx, getPath} = require('../utils.js');
+const {getPath} = require('../utils.js');
 
 const extension = siteConfig.cleanUrl ? '' : '.html';
 
 // language dropdown nav item for when translations are enabled
 class LanguageDropDown extends React.Component {
   render() {
-    setLanguage(this.props.language || 'en');
     const helpTranslateString = translate(
       'Help Translate|recruit community translators for your project'
     );
     // add all enabled languages to dropdown
-    const enabledLanguages = env.translation
+    const enabledLanguages = translation
       .enabledLanguages()
       .filter(lang => lang.tag !== this.props.language)
       .map(lang => {
@@ -66,7 +62,7 @@ class LanguageDropDown extends React.Component {
     }
 
     // Get the current language full name for display in the header nav
-    const currentLanguage = env.translation
+    const currentLanguage = translation
       .enabledLanguages()
       .filter(lang => lang.tag === this.props.language)
       .map(lang => lang.name);
@@ -143,10 +139,7 @@ class HeaderNav extends React.Component {
       );
     }
     if (link.languages) {
-      if (
-        env.translation.enabled &&
-        env.translation.enabledLanguages().length > 1
-      ) {
+      if (translation.enabled && translation.enabledLanguages().length > 1) {
         return (
           <LanguageDropDown
             baseUrl={this.props.baseUrl}
@@ -161,12 +154,12 @@ class HeaderNav extends React.Component {
     }
     if (link.doc) {
       // set link to document with current page's language/version
-      const langPart = env.translation.enabled
+      const langPart = translation.enabled
         ? `${this.props.language || 'en'}-`
         : '';
       const versionPart =
-        env.versioning.enabled && this.props.version !== 'next'
-          ? `version-${this.props.version || env.versioning.defaultVersion}-`
+        versioning.enabled && this.props.version !== 'next'
+          ? `version-${this.props.version || versioning.defaultVersion}-`
           : '';
       const id = langPart + versionPart + link.doc;
       if (!Metadata[id]) {
@@ -179,9 +172,9 @@ class HeaderNav extends React.Component {
         } else {
           errorStr += `${'. Check the spelling of your `doc` field. If that seems sane, and a document in your docs folder exists with that `id` value, \nthen this is likely a bug in Docusaurus.' +
             ' Docusaurus thinks one or both of translations (currently set to: '}${
-            env.translation.enabled
+            translation.enabled
           }) or versioning (currently set to: ${
-            env.versioning.enabled
+            versioning.enabled
           }) is enabled when maybe they should not be. \nThus my internal id for this doc is: '${id}'. Please file an issue for this possible bug on GitHub.`;
         }
         throw new Error(errorStr);
@@ -199,7 +192,7 @@ class HeaderNav extends React.Component {
       if (fs.existsSync(`${CWD}/pages/en/${link.page}.js`)) {
         href =
           siteConfig.baseUrl +
-          (env.translation.enabled ? `${language}/` : '') +
+          (translation.enabled ? `${language}/` : '') +
           link.page +
           extension;
       } else {
@@ -220,11 +213,11 @@ class HeaderNav extends React.Component {
         (link.blog && this.props.current.blogListing) ||
         (link.page && link.page === this.props.current.id),
     });
-    const i18n = translation[this.props.language];
+
     return (
       <li key={`${link.label}page`} className={itemClasses}>
         <a href={href} target={link.external ? '_blank' : '_self'}>
-          {idx(i18n, ['localized-strings', 'links', link.label]) || link.label}
+          {translation.t(['links', link.label]) || link.label}
         </a>
       </li>
     );
@@ -292,7 +285,7 @@ class HeaderNav extends React.Component {
       : 'headerTitle';
     const versionsLink =
       this.props.baseUrl +
-      (env.translation.enabled
+      (translation.enabled
         ? `${this.props.language}/versions${extension}`
         : `versions${extension}`);
     return (
@@ -302,7 +295,7 @@ class HeaderNav extends React.Component {
             <a
               href={
                 this.props.baseUrl +
-                (env.translation.enabled ? this.props.language : '')
+                (translation.enabled ? this.props.language : '')
               }>
               {siteConfig.headerIcon && (
                 <img
@@ -315,9 +308,9 @@ class HeaderNav extends React.Component {
                 <h2 className={headerClass}>{this.props.title}</h2>
               )}
             </a>
-            {env.versioning.enabled && (
+            {versioning.enabled && (
               <a href={versionsLink}>
-                <h3>{this.props.version || env.versioning.defaultVersion}</h3>
+                <h3>{this.props.version || versioning.defaultVersion}</h3>
               </a>
             )}
             {this.renderResponsiveNav()}

diff --git a/lib/core/nav/SideNav.js b/lib/core/nav/SideNav.js
@@ -10,36 +10,28 @@ const classNames = require('classnames');
 
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translation = require('../../server/translation.js');
-const {getPath, idx} = require('../utils.js');
+const {getPath} = require('../utils.js');
 
 class SideNav extends React.Component {
   // return appropriately translated category string
   getLocalizedCategoryString(category) {
-    const categoryString =
-      idx(translation, [
-        this.props.language,
-        'localized-strings',
-        'categories',
-        category,
-      ]) || category;
+    const categoryString = translation.t(['categories', category]) || category;
+
     return categoryString;
   }
 
   // return appropriately translated label to use for doc/blog in sidebar
   getLocalizedString(metadata) {
     let localizedString;
-    const i18n = translation[this.props.language];
     const id = metadata.localized_id;
     const sbTitle = metadata.sidebar_label;
 
     if (sbTitle) {
-      localizedString =
-        idx(i18n, ['localized-strings', 'docs', id, 'sidebar_label']) ||
-        sbTitle;
+      localizedString = translation.t(['docs', id, 'sidebar_label']) || sbTitle;
     } else {
-      localizedString =
-        idx(i18n, ['localized-strings', 'docs', id, 'title']) || metadata.title;
+      localizedString = translation.t(['docs', id, 'title']) || metadata.title;
     }
+
     return localizedString;
   }
 

diff --git a/lib/server/blog.js b/lib/server/blog.js
@@ -34,8 +34,12 @@ function fileToUrl(file) {
 
 function getPagesMarkup(numOfBlog, config) {
   const BlogPageLayout = require('../core/BlogPageLayout.js');
+  const env = require('./env');
   const blogPages = {};
   const perPage = 10;
+
+  env.translation.setLanguage('en');
+
   for (let page = 0; page < Math.ceil(numOfBlog / perPage); page++) {
     const metadata = {page, perPage};
     const blogPageComp = (
@@ -65,10 +69,16 @@ function getMetadata(file) {
 
 function getPostMarkup(file, config) {
   const metadata = getMetadata(file);
+
   if (!metadata) {
     return null;
   }
+
+  const env = require('./env');
   const BlogPostLayout = require('../core/BlogPostLayout.js');
+
+  env.translation.setLanguage('en');
+
   const blogPostComp = (
     <BlogPostLayout metadata={metadata} language="en" config={config}>
       {metadata.content}

diff --git a/lib/server/docs.js b/lib/server/docs.js
@@ -101,6 +101,8 @@ function getMarkup(rawContent, mdToHtml, metadata) {
   // replace any relative links to static assets (not in fenced code blocks) to absolute links
   content = replaceAssetsLink(content);
 
+  env.translation.setLanguage(metadata.language);
+
   const DocsLayout = require('../core/DocsLayout.js');
   return renderToStaticMarkupWithDoctype(
     <DocsLayout