Fix deep property accessor and rename it to idx

lib/core/DocsLayout.js

@@ -16,7 +16,7 @@ const DocsSidebar = require('./DocsSidebar.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
-const utils = require('./utils.js');
+const {idx} = require('./utils.js');
 
 // component used to generate whole webpage for docs, including sidebar/header/footer
 class DocsLayout extends React.Component {
@@ -44,8 +44,7 @@ class DocsLayout extends React.Component {
       DocComponent = this.props.Doc;
     }
     const title =
-      utils.getDeepProp(i18n, `localized-strings.docs.${id}.title`) ||
-      defaultTitle;
+      idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
     return (
       <Site
@@ -80,11 +79,8 @@ class DocsLayout extends React.Component {
                     metadata.previous_id
                   )}>
                   ←{' '}
-                  {utils.getDeepProp(
-                    i18n,
-                    `localized-strings.${metadata.previous_id}`
-                  ) ||
-                    utils.getDeepProp(i18n, `localized-strings.previous`) ||
+                  {idx(i18n, ['localized-strings', metadata.previous_id]) ||
+                    idx(i18n, ['localized-strings', 'previous']) ||
                     metadata.previous_title ||
                     'Previous'}
                 </a>
@@ -96,11 +92,8 @@ class DocsLayout extends React.Component {
                     metadata.localized_id,
                     metadata.next_id
                   )}>
-                  {utils.getDeepProp(
-                    i18n,
-                    `localized-strings.${metadata.next_id}`
-                  ) ||
-                    utils.getDeepProp(i18n, `localized-strings.next`) ||
+                  {idx(i18n, ['localized-strings', metadata.next_id]) ||
+                    idx(i18n, ['localized-strings', 'next']) ||
                     metadata.next_title ||
                     'Next'}{' '}
                   →

lib/core/Redirect.js

@@ -8,16 +8,14 @@
 const React = require('react');
 const Head = require('./Head.js');
 const translation = require('../server/translation.js');
-const utils = require('./utils.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 =
-      utils.getDeepProp(
-        translation,
-        `${this.props.language}.localized-strings.tagline`
-      ) || this.props.config.tagline;
+      idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
+      this.props.config.tagline;
     const title = this.props.title
       ? `${this.props.title} · ${this.props.config.title}`
       : (!this.props.config.disableTitleTagline &&

lib/core/Site.js

@@ -14,18 +14,16 @@ const Head = require('./Head.js');
 const Footer = require(`${process.cwd()}/core/Footer.js`);
 const translation = require('../server/translation.js');
 const constants = require('./constants');
-const utils = require('./utils.js');
+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 =
-      utils.getDeepProp(
-        translation,
-        `${this.props.language}.localized-strings.tagline`
-      ) || this.props.config.tagline;
+      idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
+      this.props.config.tagline;
     const title = this.props.title
       ? `${this.props.title} · ${this.props.config.title}`
       : (!this.props.config.disableTitleTagline &&

lib/core/nav/HeaderNav.js

@@ -22,7 +22,7 @@ const readMetadata = require('../../server/readMetadata.js');
 
 readMetadata.generateMetadataDocs();
 const Metadata = require('../metadata.js');
-const utils = require('../utils.js');
+const {idx, getPath} = require('../utils.js');
 
 const extension = siteConfig.cleanUrl ? '' : '.html';
 
@@ -56,7 +56,7 @@ class LanguageDropDown extends React.Component {
         }
         return (
           <li key={lang.tag}>
-            <a href={utils.getPath(href, this.props.cleanUrl)}>{lang.name}</a>
+            <a href={getPath(href, this.props.cleanUrl)}>{lang.name}</a>
           </li>
         );
       });
@@ -188,7 +188,7 @@ class HeaderNav extends React.Component {
       }
       href =
         this.props.config.baseUrl +
-        utils.getPath(Metadata[id].permalink, this.props.config.cleanUrl);
+        getPath(Metadata[id].permalink, this.props.config.cleanUrl);
 
       const {id: currentID, sidebar} = this.props.current;
       docItemActive = currentID && currentID === id;
@@ -224,8 +224,7 @@ class HeaderNav extends React.Component {
     return (
       <li key={`${link.label}page`} className={itemClasses}>
         <a href={href} target={link.external ? '_blank' : '_self'}>
-          {utils.getDeepProp(i18n, `localized-strings.links.${link.label}`) ||
-            link.label}
+          {idx(i18n, ['localized-strings', 'links', link.label]) || link.label}
         </a>
       </li>
     );

lib/core/nav/SideNav.js

@@ -10,16 +10,18 @@ const classNames = require('classnames');
 
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translation = require('../../server/translation.js');
-const utils = require('../utils.js');
+const {getPath, idx} = require('../utils.js');
 
 class SideNav extends React.Component {
   // return appropriately translated category string
   getLocalizedCategoryString(category) {
     const categoryString =
-      utils.getDeepProp(
-        translation,
-        `${this.props.language}.localized-strings.categories.${category}`
-      ) || category;
+      idx(translation, [
+        this.props.language,
+        'localized-strings',
+        'categories',
+        category,
+      ]) || category;
     return categoryString;
   }
 
@@ -32,27 +34,26 @@ class SideNav extends React.Component {
 
     if (sbTitle) {
       localizedString =
-        utils.getDeepProp(i18n, `localized-strings.docs.${id}.sidebar_label`) ||
+        idx(i18n, ['localized-strings', 'docs', id, 'sidebar_label']) ||
         sbTitle;
     } else {
       localizedString =
-        utils.getDeepProp(i18n, `localized-strings.docs.${id}.title`) ||
-        metadata.title;
+        idx(i18n, ['localized-strings', 'docs', id, 'title']) || metadata.title;
     }
     return localizedString;
   }
 
   // return link to doc in sidebar
   getLink(metadata) {
     if (metadata.permalink) {
-      const targetLink = utils.getPath(metadata.permalink, siteConfig.cleanUrl);
+      const targetLink = getPath(metadata.permalink, siteConfig.cleanUrl);
       if (targetLink.match(/^https?:/)) {
         return targetLink;
       }
       return siteConfig.baseUrl + targetLink;
     }
     if (metadata.path) {
-      return `${siteConfig.baseUrl}blog/${utils.getPath(
+      return `${siteConfig.baseUrl}blog/${getPath(
         metadata.path,
         siteConfig.cleanUrl
       )}`;

lib/core/utils.js

@@ -28,17 +28,14 @@ function getPath(path, cleanUrl = false) {
   return path;
 }
 
-function getDeepProp(target, path) {
-  return path
-    .split('.')
-    .filter(key => key !== '')
-    .reduce((obj, key) => obj && (obj[key] || undefined), target);
+function idx(target, path) {
+  return path.reduce((obj, key) => obj && obj[key], target);
 }
 
 module.exports = {
   blogPostHasTruncateMarker,
   extractBlogPostBeforeTruncate,
   getPath,
   removeExtension,
-  getDeepProp,
+  idx,
 };