Add Prettier Formatting (#258)

* Add Prettier formatting to source files and example files, and check that Prettier formatting is maintained on PRs * Remove trailing-comma as we are using Node 6 on Circle * Use latest Node 6 LTS version in Circle * Remove unused test
2025-06-24 21:48:02 +02:00 · 2017-12-04 19:21:02 -08:00 · 2017-12-04 19:21:02 -08:00 · 65421db62e
commit 65421db62e
parent 0cead4b6f9
50 changed files with 1376 additions and 1350 deletions
--- a/lib/core/BlogPageLayout.js
+++ b/lib/core/BlogPageLayout.js
@ -5,19 +5,19 @@
 * LICENSE file in the root directory of this source tree.
 */

-const BlogPost = require("./BlogPost.js");
-const BlogSidebar = require("./BlogSidebar.js");
-const Container = require("./Container.js");
-const MetadataBlog = require("./MetadataBlog.js");
-const React = require("react");
-const Site = require("./Site.js");
+const BlogPost = require('./BlogPost.js');
+const BlogSidebar = require('./BlogSidebar.js');
+const Container = require('./Container.js');
+const MetadataBlog = require('./MetadataBlog.js');
+const React = require('react');
+const Site = require('./Site.js');

 // used to generate entire blog pages, i.e. collection of truncated blog posts
 class BlogPageLayout extends React.Component {
  getPageURL(page) {
-    let url = this.props.config.baseUrl + "blog/";
+    let url = this.props.config.baseUrl + 'blog/';
    if (page > 0) {
-      url += "page" + (page + 1) + "/";
+      url += 'page' + (page + 1) + '/';
    }
    return url;
  }
@ -34,20 +34,19 @@ class BlogPageLayout extends React.Component {
          />
          <Container className="mainContainer documentContainer postContainer blogContainer">
            <div className="posts">
-              {MetadataBlog.slice(
-                page * perPage,
-                (page + 1) * perPage
-              ).map(post => {
-                return (
-                  <BlogPost
-                    post={post}
-                    content={post.content}
-                    truncate={true}
-                    key={post.path + post.title}
-                    config={this.props.config}
-                  />
-                );
-              })}
+              {MetadataBlog.slice(page * perPage, (page + 1) * perPage).map(
+                post => {
+                  return (
+                    <BlogPost
+                      post={post}
+                      content={post.content}
+                      truncate={true}
+                      key={post.path + post.title}
+                      config={this.props.config}
+                    />
+                  );
+                }
+              )}
              <div className="docs-prevnext">
                {page > 0 && (
                  <a className="docs-prev" href={this.getPageURL(page - 1)}>
--- a/lib/core/BlogPost.js
+++ b/lib/core/BlogPost.js
@ -5,27 +5,27 @@
 * LICENSE file in the root directory of this source tree.
 */

-const MarkdownBlock = require("./MarkdownBlock.js");
-const React = require("react");
+const MarkdownBlock = require('./MarkdownBlock.js');
+const React = require('react');

 // inner blog component for the article itself, without sidebar/header/footer
 class BlogPost extends React.Component {
  renderContent() {
    let content = this.props.content;
    let hasSplit = false;
-    if (content.split("<!--truncate-->").length > 1) {
+    if (content.split('<!--truncate-->').length > 1) {
      hasSplit = (
        <div className="read-more">
          <a
            className="button"
-            href={this.props.config.baseUrl + "blog/" + this.props.post.path}>
+            href={this.props.config.baseUrl + 'blog/' + this.props.post.path}>
            Read More
          </a>
        </div>
      );
    }
    if (this.props.truncate) {
-      content = content.split("<!--truncate-->")[0];
+      content = content.split('<!--truncate-->')[0];
      return (
        <article className="post-content">
          <MarkdownBlock>{content}</MarkdownBlock>
@ -39,17 +39,17 @@ class BlogPost extends React.Component {
  renderAuthorPhoto() {
    const post = this.props.post;
    const className =
-      "authorPhoto" +
-      (post.author && post.authorTitle ? " authorPhoto-big" : "");
+      'authorPhoto' +
+      (post.author && post.authorTitle ? ' authorPhoto-big' : '');
    if (post.authorFBID) {
      return (
        <div className={className}>
          <a href={post.authorURL} target="_blank">
            <img
              src={
-                "https://graph.facebook.com/" +
+                'https://graph.facebook.com/' +
                post.authorFBID +
-                "/picture/?height=200&width=200"
+                '/picture/?height=200&width=200'
              }
            />
          </a>
@ -72,7 +72,7 @@ class BlogPost extends React.Component {
    const post = this.props.post;
    return (
      <h1>
-        <a href={this.props.config.baseUrl + "blog/" + post.path}>
+        <a href={this.props.config.baseUrl + 'blog/' + post.path}>
          {post.title}
        </a>
      </h1>
@ -85,18 +85,18 @@ class BlogPost extends React.Component {
    // Because JavaScript sucks at date handling :(
    const year = match[1];
    const month = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December"
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
    ][parseInt(match[2], 10) - 1];
    const day = parseInt(match[3], 10);

--- a/lib/core/BlogPostLayout.js
+++ b/lib/core/BlogPostLayout.js
@ -5,31 +5,44 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const BlogPost = require("./BlogPost.js");
-const BlogSidebar = require("./BlogSidebar.js");
-const Container = require("./Container.js");
-const Site = require("./Site.js");
+const React = require('react');
+const BlogPost = require('./BlogPost.js');
+const BlogSidebar = require('./BlogSidebar.js');
+const Container = require('./Container.js');
+const Site = require('./Site.js');

 // used for entire blog posts, i.e., each written blog article with sidebar with site header/footer
 class BlogPostLayout extends React.Component {
-
  renderSocialButtons() {
    const post = this.props.metadata;

-    const fbLike = this.props.config.facebookAppId ?
-    <div
-      className="fb-like"
-      data-layout="standard"
-      data-share="true"
-      data-width="225"
-      data-show-faces="false">
-    </div>
-    : null;
+    const fbLike = this.props.config.facebookAppId ? (
+      <div
+        className="fb-like"
+        data-layout="standard"
+        data-share="true"
+        data-width="225"
+        data-show-faces="false"
+      />
+    ) : null;

-    const twitterShare = this.props.config.twitter ?
-    <a href="https://twitter.com/share" className="twitter-share-button" data-text={post.title} data-url={this.props.config.url + this.props.config.baseUrl + "blog/" + post.path} data-related={this.props.config.twitter} data-via={post.authorTwitter} data-show-count="false">Tweet</a>
-    : null;
+    const twitterShare = this.props.config.twitter ? (
+      <a
+        href="https://twitter.com/share"
+        className="twitter-share-button"
+        data-text={post.title}
+        data-url={
+          this.props.config.url +
+          this.props.config.baseUrl +
+          'blog/' +
+          post.path
+        }
+        data-related={this.props.config.twitter}
+        data-via={post.authorTwitter}
+        data-show-count="false">
+        Tweet
+      </a>
+    ) : null;

    if (!fbLike && !twitterShare) {
      return;
@ -51,15 +64,14 @@ class BlogPostLayout extends React.Component {
    return (
      <Site
        className="sideNavVisible"
-        url={"blog/" + this.props.metadata.path}
+        url={'blog/' + this.props.metadata.path}
        title={this.props.metadata.title}
-        language={"en"}
-        description={this.props.children.trim().split("\n")[0]}
-        config={this.props.config}
-      >
+        language={'en'}
+        description={this.props.children.trim().split('\n')[0]}
+        config={this.props.config}>
        <div className="docMainWrapper wrapper">
          <BlogSidebar
-            language={"en"}
+            language={'en'}
            current={this.props.metadata}
            config={this.props.config}
          />
@ -68,16 +80,13 @@ class BlogPostLayout extends React.Component {
              <BlogPost
                post={this.props.metadata}
                content={this.props.children}
-                language={"en"}
+                language={'en'}
                config={this.props.config}
              />
              {this.renderSocialButtons()}
            </div>
            <div className="blog-recent">
-              <a
-                className="button"
-                href={this.props.config.baseUrl + "blog"}
-              >
+              <a className="button" href={this.props.config.baseUrl + 'blog'}>
                Recent Posts
              </a>
            </div>
--- a/lib/core/BlogSidebar.js
+++ b/lib/core/BlogSidebar.js
@ -5,30 +5,30 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const Container = require("./Container.js");
-const SideNav = require("./nav/SideNav.js");
+const React = require('react');
+const Container = require('./Container.js');
+const SideNav = require('./nav/SideNav.js');

-const MetadataBlog = require("./MetadataBlog.js");
+const MetadataBlog = require('./MetadataBlog.js');

 class BlogSidebar extends React.Component {
  render() {
    const contents = [
      {
-        name: "Recent Posts",
-        links: MetadataBlog.slice(0, 5)
-      }
+        name: 'Recent Posts',
+        links: MetadataBlog.slice(0, 5),
+      },
    ];
    const title = this.props.current && this.props.current.title;
    const current = {
-      id: title || "",
-      category: "Recent Posts"
+      id: title || '',
+      category: 'Recent Posts',
    };
    return (
      <Container className="docsNavContainer" id="docsNav" wrapper={false}>
        <SideNav
          language={this.props.language}
-          root={this.props.config.baseUrl + "blog/"}
+          root={this.props.config.baseUrl + 'blog/'}
          title="Blog"
          contents={contents}
          current={current}
--- a/lib/core/CompLibrary.js
+++ b/lib/core/CompLibrary.js
@ -5,13 +5,13 @@
 * LICENSE file in the root directory of this source tree.
 */

-const MarkdownBlock = require("./MarkdownBlock.js");
-const Container = require("./Container.js");
-const GridBlock = require("./GridBlock.js");
+const MarkdownBlock = require('./MarkdownBlock.js');
+const Container = require('./Container.js');
+const GridBlock = require('./GridBlock.js');

 // A collection of components to provide to users
 module.exports = {
  MarkdownBlock: MarkdownBlock,
  Container: Container,
-  GridBlock: GridBlock
+  GridBlock: GridBlock,
 };
--- a/lib/core/Container.js
+++ b/lib/core/Container.js
@ -5,29 +5,25 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const classNames = require("classnames");
+const React = require('react');
+const classNames = require('classnames');

 class Container extends React.Component {
  render() {
-    const containerClasses = classNames("container", this.props.className, {
-      darkBackground: this.props.background === "dark",
-      highlightBackground: this.props.background === "highlight",
-      lightBackground: this.props.background === "light",
-      paddingAll: this.props.padding.indexOf("all") >= 0,
-      paddingBottom: this.props.padding.indexOf("bottom") >= 0,
-      paddingLeft: this.props.padding.indexOf("left") >= 0,
-      paddingRight: this.props.padding.indexOf("right") >= 0,
-      paddingTop: this.props.padding.indexOf("top") >= 0
+    const containerClasses = classNames('container', this.props.className, {
+      darkBackground: this.props.background === 'dark',
+      highlightBackground: this.props.background === 'highlight',
+      lightBackground: this.props.background === 'light',
+      paddingAll: this.props.padding.indexOf('all') >= 0,
+      paddingBottom: this.props.padding.indexOf('bottom') >= 0,
+      paddingLeft: this.props.padding.indexOf('left') >= 0,
+      paddingRight: this.props.padding.indexOf('right') >= 0,
+      paddingTop: this.props.padding.indexOf('top') >= 0,
    });
    let wrappedChildren;

    if (this.props.wrapper) {
-      wrappedChildren = (
-        <div className="wrapper">
-          {this.props.children}
-        </div>
-      );
+      wrappedChildren = <div className="wrapper">{this.props.children}</div>;
    } else {
      wrappedChildren = this.props.children;
    }
@ -40,9 +36,9 @@ class Container extends React.Component {
 }

 Container.defaultProps = {
-  background: "transparent",
+  background: 'transparent',
  padding: [],
-  wrapper: true
+  wrapper: true,
 };

 module.exports = Container;
--- a/lib/core/Doc.js
+++ b/lib/core/Doc.js
@ -5,16 +5,16 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const MarkdownBlock = require("./MarkdownBlock.js");
+const React = require('react');
+const MarkdownBlock = require('./MarkdownBlock.js');

-const translate = require("../server/translate.js").translate;
+const translate = require('../server/translate.js').translate;

 const editThisDoc = translate(
-  "Edit this Doc|recruitment message asking to edit the doc source"
+  'Edit this Doc|recruitment message asking to edit the doc source'
 );
 const translateThisDoc = translate(
-  "Translate this Doc|recruitment message asking to translate the docs"
+  'Translate this Doc|recruitment message asking to translate the docs'
 );

 // inner doc component for article itself
@ -29,14 +29,14 @@ class Doc extends React.Component {
          {editThisDoc}
        </a>
      );
-    if (this.props.language != "en") {
+    if (this.props.language != 'en') {
      editLink = !this.props.version &&
        this.props.config.translationRecruitingLink && (
          <a
            className="edit-page-link button"
            href={
              this.props.config.translationRecruitingLink +
-              "/" +
+              '/' +
              this.props.language
            }
            target="_blank">
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@ -5,12 +5,12 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const Container = require("./Container.js");
-const Doc = require("./Doc.js");
-const DocsSidebar = require("./DocsSidebar.js");
-const Site = require("./Site.js");
-const translation = require("../server/translation.js");
+const React = require('react');
+const Container = require('./Container.js');
+const Doc = require('./Doc.js');
+const DocsSidebar = require('./DocsSidebar.js');
+const Site = require('./Site.js');
+const translation = require('../server/translation.js');

 // component used to generate whole webpage for docs, including sidebar/header/footer
 class DocsLayout extends React.Component {
@ -28,12 +28,12 @@ class DocsLayout extends React.Component {
        className="sideNavVisible"
        title={
          i18n
-            ? translation[this.props.metadata.language]["localized-strings"][
+            ? translation[this.props.metadata.language]['localized-strings'][
                this.props.metadata.localized_id
              ] || this.props.metadata.title
            : this.props.metadata.title
        }
-        description={content.trim().split("\n")[0]}
+        description={content.trim().split('\n')[0]}
        language={metadata.language}
        version={metadata.version}>
        <div className="docMainWrapper wrapper">
@ -47,7 +47,7 @@ class DocsLayout extends React.Component {
              title={
                i18n
                  ? translation[this.props.metadata.language][
-                      "localized-strings"
+                      'localized-strings'
                    ][this.props.metadata.localized_id] ||
                    this.props.metadata.title
                  : this.props.metadata.title
@ -58,34 +58,32 @@ class DocsLayout extends React.Component {
              {metadata.previous_id && (
                <a
                  className="docs-prev button"
-                  href={metadata.previous_id + ".html"}>
-                  ←{" "}
+                  href={metadata.previous_id + '.html'}>
+                  ←{' '}
                  {i18n
                    ? translation[this.props.metadata.language][
-                        "localized-strings"
+                        'localized-strings'
                      ][metadata.previous_id] ||
                      translation[this.props.metadata.language][
-                        "localized-strings"
-                      ]["previous"] ||
-                      "Previous"
-                    : metadata.previous_title || "Previous"
-                  }
+                        'localized-strings'
+                      ]['previous'] ||
+                      'Previous'
+                    : metadata.previous_title || 'Previous'}
                </a>
              )}
              {metadata.next_id && (
                <a
                  className="docs-next button"
-                  href={metadata.next_id + ".html"}>
+                  href={metadata.next_id + '.html'}>
                  {i18n
                    ? translation[this.props.metadata.language][
-                        "localized-strings"
+                        'localized-strings'
                      ][metadata.next_id] ||
                      translation[this.props.metadata.language][
-                        "localized-strings"
-                      ]["next"] ||
-                      "Next"
-                    : metadata.next_title || "Next"
-                  }{" "}
+                        'localized-strings'
+                      ]['next'] ||
+                      'Next'
+                    : metadata.next_title || 'Next'}{' '}
                  →
                </a>
              )}
--- a/lib/core/DocsSidebar.js
+++ b/lib/core/DocsSidebar.js
@ -5,12 +5,12 @@
 * LICENSE file in the root directory of this source tree.
 */

-const Metadata = require("./metadata.js");
-const React = require("react");
-const Container = require("./Container.js");
-const SideNav = require("./nav/SideNav.js");
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-const readCategories = require("../server/readCategories.js");
+const Metadata = require('./metadata.js');
+const React = require('react');
+const Container = require('./Container.js');
+const SideNav = require('./nav/SideNav.js');
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const readCategories = require('../server/readCategories.js');

 class DocsSidebar extends React.Component {
  render() {
--- a/lib/core/GridBlock.js
+++ b/lib/core/GridBlock.js
@ -5,32 +5,32 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const classNames = require("classnames");
+const React = require('react');
+const classNames = require('classnames');

-const MarkdownBlock = require("./MarkdownBlock.js");
+const MarkdownBlock = require('./MarkdownBlock.js');

 class GridBlock extends React.Component {
  renderBlock(block) {
-    const blockClasses = classNames("blockElement", this.props.className, {
-      alignCenter: this.props.align === "center",
-      alignRight: this.props.align === "right",
-      fourByGridBlock: this.props.layout === "fourColumn",
-      imageAlignBottom: block.image && block.imageAlign === "bottom",
+    const blockClasses = classNames('blockElement', this.props.className, {
+      alignCenter: this.props.align === 'center',
+      alignRight: this.props.align === 'right',
+      fourByGridBlock: this.props.layout === 'fourColumn',
+      imageAlignBottom: block.image && block.imageAlign === 'bottom',
      imageAlignSide:
        block.image &&
-        (block.imageAlign === "left" || block.imageAlign === "right"),
-      imageAlignTop: block.image && block.imageAlign === "top",
-      threeByGridBlock: this.props.layout === "threeColumn",
-      twoByGridBlock: this.props.layout === "twoColumn"
+        (block.imageAlign === 'left' || block.imageAlign === 'right'),
+      imageAlignTop: block.image && block.imageAlign === 'top',
+      threeByGridBlock: this.props.layout === 'threeColumn',
+      twoByGridBlock: this.props.layout === 'twoColumn',
    });

    const topLeftImage =
-      (block.imageAlign === "top" || block.imageAlign === "left") &&
+      (block.imageAlign === 'top' || block.imageAlign === 'left') &&
      this.renderBlockImage(block.image, block.imageLink);

    const bottomRightImage =
-      (block.imageAlign === "bottom" || block.imageAlign === "right") &&
+      (block.imageAlign === 'bottom' || block.imageAlign === 'right') &&
      this.renderBlockImage(block.image, block.imageLink);

    return (
@ -38,9 +38,7 @@ class GridBlock extends React.Component {
        {topLeftImage}
        <div className="blockContent">
          {this.renderBlockTitle(block.title)}
-          <MarkdownBlock>
-            {block.content}
-          </MarkdownBlock>
+          <MarkdownBlock>{block.content}</MarkdownBlock>
        </div>
        {bottomRightImage}
      </div>
@ -73,9 +71,7 @@ class GridBlock extends React.Component {
    if (title) {
      return (
        <h2>
-          <MarkdownBlock>
-            {title}
-          </MarkdownBlock>
+          <MarkdownBlock>{title}</MarkdownBlock>
        </h2>
      );
    } else {
@ -93,10 +89,10 @@ class GridBlock extends React.Component {
 }

 GridBlock.defaultProps = {
-  align: "left",
+  align: 'left',
  contents: [],
-  imagealign: "top",
-  layout: "twoColumn"
+  imagealign: 'top',
+  layout: 'twoColumn',
 };

 module.exports = GridBlock;
--- a/lib/core/Head.js
+++ b/lib/core/Head.js
@ -5,7 +5,7 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
+const React = require('react');

 // html head for each page
 class Head extends React.Component {
@ -17,8 +17,10 @@ class Head extends React.Component {
    });

    const highlightDefaultVersion = '9.12.0';
-    const highlightConfig = this.props.config.highlight
-      || { version: highlightDefaultVersion, theme: 'default' };
+    const highlightConfig = this.props.config.highlight || {
+      version: highlightDefaultVersion,
+      theme: 'default',
+    };
    const highlightVersion = highlightConfig.version || highlightDefaultVersion;
    const highlightTheme = highlightConfig.theme || 'default';

@ -43,7 +45,7 @@ class Head extends React.Component {
        {this.props.redirect && (
          <meta
            http-equiv="refresh"
-            content={"0; URL=" + this.props.redirect}
+            content={'0; URL=' + this.props.redirect}
          />
        )}
        <link
@ -58,45 +60,47 @@ class Head extends React.Component {
        )}
        <link
          rel="stylesheet"
-          href={`//cdnjs.cloudflare.com/ajax/libs/highlight.js/${highlightVersion}/styles/${highlightTheme}.min.css`}
+          href={`//cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+            highlightVersion
+          }/styles/${highlightTheme}.min.css`}
        />
        {hasBlog && (
          <link
            rel="alternate"
            type="application/atom+xml"
-            href={this.props.config.url + "/blog/atom.xml"}
-            title={this.props.config.title + " Blog ATOM Feed"}
+            href={this.props.config.url + '/blog/atom.xml'}
+            title={this.props.config.title + ' Blog ATOM Feed'}
          />
        )}
        {hasBlog && (
          <link
            rel="alternate"
            type="application/rss+xml"
-            href={this.props.config.url + "/blog/feed.xml"}
-            title={this.props.config.title + " Blog RSS Feed"}
+            href={this.props.config.url + '/blog/feed.xml'}
+            title={this.props.config.title + ' Blog RSS Feed'}
          />
        )}

        {/* External resources */}
-        {this.props.config.stylesheets && this.props.config.stylesheets.map(function(source) {
-          return (
-            <link rel="stylesheet" href={source} />
-          );
-        })}
-        {this.props.config.scripts && this.props.config.scripts.map(function(source, idx) {
-          return (
-            <script
-              type="text/javascript"
-              key={"script" + idx}
-              src={source}
-            />
-          );
-        })}
+        {this.props.config.stylesheets &&
+          this.props.config.stylesheets.map(function(source) {
+            return <link rel="stylesheet" href={source} />;
+          })}
+        {this.props.config.scripts &&
+          this.props.config.scripts.map(function(source, idx) {
+            return (
+              <script
+                type="text/javascript"
+                key={'script' + idx}
+                src={source}
+              />
+            );
+          })}

        {/* Site defined code. Keep these at the end to avoid overriding. */}
        <link
          rel="stylesheet"
-          href={this.props.config.baseUrl + "css/main.css"}
+          href={this.props.config.baseUrl + 'css/main.css'}
        />
      </head>
    );
--- a/lib/core/Header.js
+++ b/lib/core/Header.js
@ -5,19 +5,19 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const toSlug = require("./toSlug.js");
+const React = require('react');
+const toSlug = require('./toSlug.js');

 class Header extends React.Component {
  render() {
    const slug = toSlug(this.props.toSlug || this.props.children);
-    const Heading = "h" + this.props.level;
+    const Heading = 'h' + this.props.level;

    return (
      <Heading {...this.props}>
        <a className="anchor" name={slug} />
-        {this.props.children}{" "}
-        <a className="hash-link" href={"#" + slug}>
+        {this.props.children}{' '}
+        <a className="hash-link" href={'#' + slug}>
          #
        </a>
      </Heading>
--- a/lib/core/MarkdownBlock.js
+++ b/lib/core/MarkdownBlock.js
@ -14,11 +14,8 @@ const Remarkable = require('./Remarkable');

 class MarkdownBlock extends React.Component {
  render() {
-    return (
-      <Remarkable source={this.props.children} />
-    );
+    return <Remarkable source={this.props.children} />;
  }
 }

 module.exports = MarkdownBlock;
-
--- a/lib/core/Redirect.js
+++ b/lib/core/Redirect.js
@ -5,10 +5,10 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const fs = require("fs");
-const Head = require("./Head.js");
-const translation = require("../server/translation.js");
+const React = require('react');
+const fs = require('fs');
+const Head = require('./Head.js');
+const translation = require('../server/translation.js');

 const CWD = process.cwd();

@ -16,24 +16,24 @@ const CWD = process.cwd();
 class Redirect extends React.Component {
  render() {
    const tagline = translation[this.props.language]
-      ? translation[this.props.language]["localized-strings"].tagline
+      ? 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.title + ' · ' + this.props.config.title
      : (!this.props.config.disableTitleTagline &&
-          this.props.config.title + " · " + tagline) ||
+          this.props.config.title + ' · ' + tagline) ||
        this.props.config.title;
    const description = this.props.description || tagline;
    const url =
      this.props.config.url +
      this.props.config.baseUrl +
-      (this.props.url || "index.html");
+      (this.props.url || 'index.html');
    let latestVersion;

    const redirect = this.props.redirect || false;

-    if (fs.existsSync(CWD + "/versions.json")) {
-      latestVersion = require(CWD + "/versions.json")[0];
+    if (fs.existsSync(CWD + '/versions.json')) {
+      latestVersion = require(CWD + '/versions.json')[0];
    }
    return (
      <html>
@ -51,7 +51,7 @@ class Redirect extends React.Component {
                <!--
                window.location.href = "${this.props.redirect}";
                // -->
-                `
+                `,
            }}
          />
        </body>
--- a/lib/core/Remarkable.js
+++ b/lib/core/Remarkable.js
@ -1,9 +1,9 @@
 'use strict';

 const React = require('react');
-const hljs = require('highlight.js')
+const hljs = require('highlight.js');
 const Markdown = require('remarkable');
-const toSlug = require("./toSlug.js");
+const toSlug = require('./toSlug.js');

 const CWD = process.cwd();

@ -12,22 +12,38 @@ const CWD = process.cwd();
 */
 function anchors(md) {
  md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
-    const textToken = tokens[idx+1];
-    return '<h' + tokens[idx].hLevel + '><a class="anchor" aria-hidden="true" name="' + toSlug(textToken.content) + '"></a><a href="#' + toSlug(textToken.content) + '" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
+    const textToken = tokens[idx + 1];
+    return (
+      '<h' +
+      tokens[idx].hLevel +
+      '><a class="anchor" aria-hidden="true" name="' +
+      toSlug(textToken.content) +
+      '"></a><a href="#' +
+      toSlug(textToken.content) +
+      '" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>'
+    );
  };
 }

 class Remarkable extends React.Component {
  content() {
    if (this.props.source) {
-      return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
-    }
-    else {
+      return (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: this.renderMarkdown(this.props.source),
+          }}
+        />
+      );
+    } else {
      return React.Children.map(this.props.children, child => {
        if (typeof child === 'string') {
-          return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
-        }
-        else {
+          return (
+            <span
+              dangerouslySetInnerHTML={{__html: this.renderMarkdown(child)}}
+            />
+          );
+        } else {
          return child;
        }
      });
@ -36,14 +52,15 @@ class Remarkable extends React.Component {

  renderMarkdown(source) {
    if (!this.md) {
-      const siteConfig = require(CWD + "/siteConfig.js");
+      const siteConfig = require(CWD + '/siteConfig.js');

      this.md = new Markdown({
        // Highlight.js expects hljs css classes on the code element.
        // This results in <pre><code class="hljs css javascript">
        langPrefix: 'hljs css ',
-        highlight: function (str, lang) {
-          lang = lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
+        highlight: function(str, lang) {
+          lang =
+            lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(lang, str).value;
@ -69,23 +86,18 @@ class Remarkable extends React.Component {
          this.md.use(plugin);
        }, this);
      }
-
    }
    const html = this.md.render(source);

    // Ensure fenced code blocks use Highlight.js hljs class
    // https://github.com/jonschlinkert/remarkable/issues/224
-    return html.replace(/<pre><code>/g,'<pre><code class="hljs">');
+    return html.replace(/<pre><code>/g, '<pre><code class="hljs">');
  }

  render() {
    var Container = this.props.container;

-    return (
-      <Container>
-        {this.content()}
-      </Container>
-    );
+    return <Container>{this.content()}</Container>;
  }
 }

--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@ -5,12 +5,12 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const fs = require("fs");
-const HeaderNav = require("./nav/HeaderNav.js");
-const Head = require("./Head.js");
-const Footer = require(process.cwd() + "/core/Footer.js");
-const translation = require("../server/translation.js");
+const React = require('react');
+const fs = require('fs');
+const HeaderNav = require('./nav/HeaderNav.js');
+const Head = require('./Head.js');
+const Footer = require(process.cwd() + '/core/Footer.js');
+const translation = require('../server/translation.js');

 const CWD = process.cwd();

@ -18,28 +18,28 @@ const CWD = process.cwd();
 class Site extends React.Component {
  render() {
    const tagline = translation[this.props.language]
-      ? translation[this.props.language]["localized-strings"].tagline
+      ? 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.title + ' · ' + this.props.config.title
      : (!this.props.config.disableTitleTagline &&
-          this.props.config.title + " · " + tagline) ||
+          this.props.config.title + ' · ' + tagline) ||
        this.props.config.title;
    const description = this.props.description || tagline;
    const url =
      this.props.config.url +
      this.props.config.baseUrl +
-      (this.props.url || "index.html");
+      (this.props.url || 'index.html');
    let latestVersion;

-    const highlightDefaultVersion = "9.12.0";
+    const highlightDefaultVersion = '9.12.0';
    const highlightConfig = this.props.config.highlight || {
      version: highlightDefaultVersion,
-      theme: "default"
+      theme: 'default',
    };
    const highlightVersion = highlightConfig.version || highlightDefaultVersion;
-    if (fs.existsSync(CWD + "/versions.json")) {
-      latestVersion = require(CWD + "/versions.json")[0];
+    if (fs.existsSync(CWD + '/versions.json')) {
+      latestVersion = require(CWD + '/versions.json')[0];
    }
    return (
      <html>
@ -78,24 +78,24 @@ class Site extends React.Component {

              ga('create', '${this.props.config.gaTrackingId}', 'auto');
              ga('send', 'pageview');
-            `
+            `,
              }}
            />
          )}
          {this.props.config.facebookAppId && (
            <script
              dangerouslySetInnerHTML={{
-                __html: `window.fbAsyncInit = function() {FB.init({appId:'${this
-                  .props.config
-                  .facebookAppId}',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
-                `
+                __html: `window.fbAsyncInit = function() {FB.init({appId:'${
+                  this.props.config.facebookAppId
+                }',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
+                `,
              }}
            />
          )}
          {this.props.config.twitter && (
            <script
              dangerouslySetInnerHTML={{
-                __html: `window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));`
+                __html: `window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));`,
              }}
            />
          )}
@ -111,10 +111,10 @@ class Site extends React.Component {
                algoliaOptions: ${JSON.stringify(
                  this.props.config.algolia.algoliaOptions
                )
-                  .replace("VERSION", this.props.version || latestVersion)
-                  .replace("LANGUAGE", this.props.language)}
+                  .replace('VERSION', this.props.version || latestVersion)
+                  .replace('LANGUAGE', this.props.language)}
              });
-            `
+            `,
                }}
              />
            ) : (
@ -126,7 +126,7 @@ class Site extends React.Component {
                indexName: '${this.props.config.algolia.indexName}',
                inputSelector: '#search_input_react'
              });
-            `
+            `,
                }}
              />
            ))}
--- a/lib/core/nav/HeaderNav.js
+++ b/lib/core/nav/HeaderNav.js
@ -7,35 +7,35 @@

 const CWD = process.cwd();

-const React = require("react");
-const fs = require("fs");
-const siteConfig = require(CWD + "/siteConfig.js");
-const translation = require("../../server/translation.js");
+const React = require('react');
+const fs = require('fs');
+const siteConfig = require(CWD + '/siteConfig.js');
+const translation = require('../../server/translation.js');

-const translate = require("../../server/translate.js").translate;
-const setLanguage = require("../../server/translate.js").setLanguage;
+const translate = require('../../server/translate.js').translate;
+const setLanguage = require('../../server/translate.js').setLanguage;

-const ENABLE_TRANSLATION = fs.existsSync(CWD + "/languages.js");
-const ENABLE_VERSIONING = fs.existsSync(CWD + "/versions.json");
+const ENABLE_TRANSLATION = fs.existsSync(CWD + '/languages.js');
+const ENABLE_VERSIONING = fs.existsSync(CWD + '/versions.json');
 let versions;
 if (ENABLE_VERSIONING) {
-  versions = require(CWD + "/versions.json");
+  versions = require(CWD + '/versions.json');
 }
-const readMetadata = require("../../server/readMetadata.js");
+const readMetadata = require('../../server/readMetadata.js');
 readMetadata.generateMetadataDocs();
-const Metadata = require("../metadata.js");
+const Metadata = require('../metadata.js');

 // language dropdown nav item for when translations are enabled
 class LanguageDropDown extends React.Component {
  render() {
    const enabledLanguages = [];
-    let currentLanguage = "English";
+    let currentLanguage = 'English';
    setLanguage(this.props.language);
    let helpTranslateString = translate(
-      "Help Translate|recruit community translators for your project"
+      'Help Translate|recruit community translators for your project'
    );
    // add all enabled languages to dropdown
-    translation["languages"].map(lang => {
+    translation['languages'].map(lang => {
      if (lang.tag == this.props.language) {
        currentLanguage = lang.name;
      }
@ -69,7 +69,7 @@ class LanguageDropDown extends React.Component {
          <a id="languages-menu" href="#">
            <img
              className="languages-icon"
-              src={this.props.baseUrl + "img/language.svg"}
+              src={this.props.baseUrl + 'img/language.svg'}
            />
            {currentLanguage}
          </a>
@ -89,7 +89,7 @@ class LanguageDropDown extends React.Component {
            languagesDropDown.className = "hide";
          }
        });
-      `
+      `,
          }}
        />
      </span>
@ -102,7 +102,7 @@ class HeaderNav extends React.Component {
  constructor() {
    super();
    this.state = {
-      slideoutActive: false
+      slideoutActive: false,
    };
  }
  // function to generate each header link, used with each object in siteConfig.headerLinks
@ -127,14 +127,14 @@ class HeaderNav extends React.Component {
    } else if (link.doc) {
      // set link to document with current page's language/version
      let id;
-      if (!ENABLE_VERSIONING || this.props.version === "next") {
-        id = this.props.language + "-" + link.doc;
+      if (!ENABLE_VERSIONING || this.props.version === 'next') {
+        id = this.props.language + '-' + link.doc;
      } else {
        id =
          this.props.language +
-          "-version-" +
+          '-version-' +
          (this.props.version || versions[0]) +
-          "-" +
+          '-' +
          link.doc;
      }
      if (!Metadata[id]) {
@ -146,31 +146,31 @@ class HeaderNav extends React.Component {
          );
        }
        throw new Error(
-          "A headerLink is specified with a document that does not exist. No document exists with id: " +
+          'A headerLink is specified with a document that does not exist. No document exists with id: ' +
            link.doc
        );
      }
      href = this.props.config.baseUrl + Metadata[id].permalink;
    } else if (link.page) {
      // set link to page with current page's language if appropriate
-      if (fs.existsSync(CWD + "/pages/en/" + link.page + ".js")) {
+      if (fs.existsSync(CWD + '/pages/en/' + link.page + '.js')) {
        href =
-          siteConfig.baseUrl + this.props.language + "/" + link.page + ".html";
+          siteConfig.baseUrl + this.props.language + '/' + link.page + '.html';
      } else {
-        href = siteConfig.baseUrl + link.page + ".html";
+        href = siteConfig.baseUrl + link.page + '.html';
      }
    } else if (link.href) {
      // set link to specified href
      href = link.href;
    } else if (link.blog) {
      // set link to blog url
-      href = this.props.baseUrl + "blog";
+      href = this.props.baseUrl + 'blog';
    }
    return (
-      <li key={link.label + "page"}>
-        <a href={href} target={link.external ? "_blank" : "_self"}>
+      <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]
+            ? translation[this.props.language]['localized-strings'][link.label]
            : link.label}
        </a>
      </li>
@ -181,8 +181,8 @@ class HeaderNav extends React.Component {
    const versionsLink =
      this.props.baseUrl +
      (ENABLE_TRANSLATION
-        ? this.props.language + "/versions.html"
-        : "versions.html");
+        ? this.props.language + '/versions.html'
+        : 'versions.html');
    return (
      <div className="fixedHeaderContainer">
        <div className="headerWrapper wrapper">
@ -218,26 +218,30 @@ class HeaderNav extends React.Component {
      }
    });
    if (!languages) {
-      headerLinks.push({ languages: true });
+      headerLinks.push({languages: true});
    }
    let search = false;
    headerLinks.forEach(link => {
-      if (link.doc && !fs.existsSync(CWD + "/../" + readMetadata.getDocsPath() + "/")) {
+      if (
+        link.doc &&
+        !fs.existsSync(CWD + '/../' + readMetadata.getDocsPath() + '/')
+      ) {
        throw new Error(
-          "You have 'doc' in your headerLinks, but no '" + readMetadata.getDocsPath() +
+          "You have 'doc' in your headerLinks, but no '" +
+            readMetadata.getDocsPath() +
            "' folder exists one level up from " +
            "'website' folder. Did you run `docusaurus-init` or `npm run examples`? If so, " +
            "make sure you rename 'docs-examples-from-docusaurus' to 'docs'."
        );
      }
-      if (link.blog && !fs.existsSync(CWD + "/blog/")) {
+      if (link.blog && !fs.existsSync(CWD + '/blog/')) {
        throw new Error(
          "You have 'blog' in your headerLinks, but no 'blog' folder exists in your " +
            "'website' folder. Did you run `docusaurus-init` or `npm run examples`? If so, " +
            "make sure you rename 'blog-examples-from-docusaurus' to 'blog'."
        );
      }
-      if (link.page && !fs.existsSync(CWD + "/pages/")) {
+      if (link.page && !fs.existsSync(CWD + '/pages/')) {
        throw new Error(
          "You have 'page' in your headerLinks, but no 'pages' folder exists in your " +
            "'website' folder."
@ -249,7 +253,7 @@ class HeaderNav extends React.Component {
      }
    });
    if (!search && this.props.config.algolia) {
-      headerLinks.push({ search: true });
+      headerLinks.push({search: true});
    }
    return (
      <div className="navigationWrapper navigationSlider">
--- a/lib/core/nav/SideNav.js
+++ b/lib/core/nav/SideNav.js
@ -5,11 +5,11 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const classNames = require("classnames");
+const React = require('react');
+const classNames = require('classnames');

-const siteConfig = require(process.cwd() + "/siteConfig.js");
-const translation = require("../../server/translation.js");
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const translation = require('../../server/translation.js');

 class SideNav extends React.Component {
  render() {
@ -39,7 +39,7 @@ class SideNav extends React.Component {
          toggler.onclick = function() {
            nav.classList.toggle('docsSliderActive');
          };
-        `
+        `,
          }}
        />
      </nav>
@ -56,7 +56,7 @@ class SideNav extends React.Component {
  // return appropriately translated category string
  getLocalizedCategoryString(category) {
    let categoryString = translation[this.props.language]
-      ? translation[this.props.language]["localized-strings"][category] ||
+      ? translation[this.props.language]['localized-strings'][category] ||
        category
      : category;
    return categoryString;
@ -69,12 +69,12 @@ class SideNav extends React.Component {

    if (sbTitle) {
      localizedString = i18n
-        ? i18n["localized-strings"][sbTitle] || sbTitle
+        ? i18n['localized-strings'][sbTitle] || sbTitle
        : sbTitle;
    } else {
      const id = metadata.original_id || metadata.localized_id;
      localizedString = i18n
-        ? i18n["localized-strings"][id] || metadata.title
+        ? i18n['localized-strings'][id] || metadata.title
        : metadata.title;
    }
    return localizedString;
@ -88,16 +88,16 @@ class SideNav extends React.Component {
      return siteConfig.baseUrl + metadata.permalink;
    }
    if (metadata.path) {
-      return siteConfig.baseUrl + "blog/" + metadata.path;
+      return siteConfig.baseUrl + 'blog/' + metadata.path;
    }
    return null;
  }
  renderItemLink(link) {
-    const itemClasses = classNames("navListItem", {
-      navListItemActive: link.id === this.props.current.id
+    const itemClasses = classNames('navListItem', {
+      navListItemActive: link.id === this.props.current.id,
    });
-    const linkClasses = classNames("navItem", {
-      navItemActive: link.id === this.props.current.id
+    const linkClasses = classNames('navItem', {
+      navItemActive: link.id === this.props.current.id,
    });
    return (
      <li className={itemClasses} key={link.id}>
@ -109,6 +109,6 @@ class SideNav extends React.Component {
  }
 }
 SideNav.defaultProps = {
-  contents: []
+  contents: [],
 };
 module.exports = SideNav;
--- a/lib/core/toSlug.js
+++ b/lib/core/toSlug.js
@ -8,33 +8,33 @@
 module.exports = string => {
  //  var accents = "àáäâèéëêìíïîòóöôùúüûñç";
  const accents =
-    "\u00e0\u00e1\u00e4\u00e2\u00e8" +
-    "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef" +
-    "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9" +
-    "\u00fa\u00fc\u00fb\u00f1\u00e7";
+    '\u00e0\u00e1\u00e4\u00e2\u00e8' +
+    '\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef' +
+    '\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9' +
+    '\u00fa\u00fc\u00fb\u00f1\u00e7';

-  const without = "aaaaeeeeiiiioooouuuunc";
+  const without = 'aaaaeeeeiiiioooouuuunc';

  let slug = string
    .toString()
    // Handle uppercase characters
    .toLowerCase()
    // Handle accentuated characters
-    .replace(new RegExp("[" + accents + "]", "g"), c => {
+    .replace(new RegExp('[' + accents + ']', 'g'), c => {
      return without.charAt(accents.indexOf(c));
    })
    // Replace `.`, `(` and `?` with blank string like Github does
-    .replace(/\.|\(|\?/g, "")
+    .replace(/\.|\(|\?/g, '')
    // Dash special characters
-    .replace(/[^a-z0-9]/g, "-")
+    .replace(/[^a-z0-9]/g, '-')
    // Compress multiple dash
-    .replace(/-+/g, "-")
+    .replace(/-+/g, '-')
    // Trim dashes
-    .replace(/^-|-$/g, "");
+    .replace(/^-|-$/g, '');

  // Add trailing `-` if string contains ` ...` in the end like Github does
  if (/\s[.]{1,}/.test(string)) {
-    slug += "-";
+    slug += '-';
  }

  return slug;
--- a/lib/core/unindent.js
+++ b/lib/core/unindent.js
@ -7,8 +7,8 @@

 // Remove the indentation introduced by JSX
 function unindent(code) {
-  const lines = code.split("\n");
-  if (lines[0] === "") {
+  const lines = code.split('\n');
+  if (lines[0] === '') {
    lines.shift();
  }
  if (lines.length <= 1) {
@ -17,9 +17,9 @@ function unindent(code) {

  const indent = lines[0].match(/^\s*/)[0];
  for (let i = 0; i < lines.length; ++i) {
-    lines[i] = lines[i].replace(new RegExp("^" + indent), "");
+    lines[i] = lines[i].replace(new RegExp('^' + indent), '');
  }
-  return lines.join("\n");
+  return lines.join('\n');
 }

 module.exports = unindent;