Merge pull request #25 from facebookexperimental/website

Initial website set-up for Docusaurus

docs/doc-markdown.md

@@ -1,11 +1,6 @@
 ---
 id: doc-markdown
 title: Documentation Markdown Features
-layout: docs
-category: Docusaurus
-permalink: docs/en/doc-markdown.html
-previous: site-config
-next: translation
 ---
 
 Docusaurus supports some extra features when writing documentation in markdown.

docs/getting-started.md

@@ -1,10 +1,6 @@
 ---
 id: getting-started
 title: Docusaurus
-layout: docs
-category: Docusaurus
-permalink: docs/en/getting-started.html
-next: site-config
 ---
 
 ## Getting Started

docs/search.md

@@ -1,10 +1,6 @@
 ---
 id: search
 title: Documentation Search
-layout: docs
-category: Docusaurus
-permalink: docs/en/search.html
-previous: translation
 ---
 
 ## Algolia Search Integration

docs/site-config.md

@@ -1,11 +1,6 @@
 ---
 id: site-config
 title: Customizing siteConfig
-layout: docs
-category: Docusaurus
-permalink: docs/en/site-config.html
-previous: getting-started
-next: doc-markdown
 ---
 
 A large part of site configuration is done by editing the `siteConfig.js` file.

docs/translation.md

@@ -1,11 +1,6 @@
 ---
 id: translation
 title: Translations with Docusaurus
-layout: docs
-category: Docusaurus
-permalink: docs/en/translation.html
-previous: doc-markdown
-next: search
 ---
 
 ## Overview

lib/build-files.js

@@ -10,10 +10,9 @@
  */
 
 require("babel-register")({
-  ignore: false,
   babelrc: false,
   plugins: [require("./server/translate-plugin.js")],
-  presets: ["react"]
+  presets: ["react", "latest", "stage-0"]
 });
 
 const generate = require("./server/generate.js");

lib/core/Prism.js

@@ -18,17 +18,17 @@ const React = require("react");
 // Private helper vars
 const lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
 
-const _ = (Prism = {
+const Prism = {
   util: {
     encode(tokens) {
       if (tokens instanceof Token) {
         return new Token(
           tokens.type,
-          _.util.encode(tokens.content),
+          Prism.util.encode(tokens.content),
           tokens.alias
         );
-      } else if (_.util.type(tokens) === "Array") {
-        return tokens.map(_.util.encode);
+      } else if (Prism.util.type(tokens) === "Array") {
+        return tokens.map(Prism.util.encode);
       } else {
         return tokens
           .replace(/&/g, "&")
@@ -43,7 +43,7 @@ const _ = (Prism = {
 
     // Deep clone a language definition (e.g. to extend it)
     clone(o) {
-      const type = _.util.type(o);
+      const type = Prism.util.type(o);
 
       switch (type) {
         case "Object":
@@ -51,7 +51,7 @@ const _ = (Prism = {
 
           for (const key in o) {
             if (o.hasOwnProperty(key)) {
-              clone[key] = _.util.clone(o[key]);
+              clone[key] = Prism.util.clone(o[key]);
             }
           }
 
@@ -62,7 +62,7 @@ const _ = (Prism = {
           return (
             o.map &&
             o.map(v => {
-              return _.util.clone(v);
+              return Prism.util.clone(v);
             })
           );
       }
@@ -73,7 +73,7 @@ const _ = (Prism = {
 
   languages: {
     extend(id, redef) {
-      const lang = _.util.clone(_.languages[id]);
+      const lang = Prism.util.clone(Prism.languages[id]);
 
       for (const key in redef) {
         lang[key] = redef[key];
@@ -92,7 +92,7 @@ const _ = (Prism = {
      * @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted.
      */
     insertBefore(inside, before, insert, root) {
-      root = root || _.languages;
+      root = root || Prism.languages;
       const grammar = root[inside];
 
       if (arguments.length == 2) {
@@ -124,7 +124,7 @@ const _ = (Prism = {
       }
 
       // Update references in other language definitions
-      _.languages.DFS(_.languages, function(key, value) {
+      Prism.languages.DFS(Prism.languages, function(key, value) {
         if (value === root[inside] && key != inside) {
           this[key] = ret;
         }
@@ -139,10 +139,10 @@ const _ = (Prism = {
         if (o.hasOwnProperty(i)) {
           callback.call(o, i, o[i], type || i);
 
-          if (_.util.type(o[i]) === "Object") {
-            _.languages.DFS(o[i], callback);
-          } else if (_.util.type(o[i]) === "Array") {
-            _.languages.DFS(o[i], callback, i);
+          if (Prism.util.type(o[i]) === "Object") {
+            Prism.languages.DFS(o[i], callback);
+          } else if (Prism.util.type(o[i]) === "Array") {
+            Prism.languages.DFS(o[i], callback, i);
           }
         }
       }
@@ -155,7 +155,7 @@ const _ = (Prism = {
     );
 
     for (let i = 0, element; (element = elements[i++]); ) {
-      _.highlightElement(element, async === true, callback);
+      Prism.highlightElement(element, async === true, callback);
     }
   },
 
@@ -171,7 +171,7 @@ const _ = (Prism = {
 
     if (parent) {
       language = (parent.className.match(lang) || [, ""])[1];
-      grammar = _.languages[language];
+      grammar = Prism.languages[language];
     }
 
     // Set language on the element, if not present
@@ -209,20 +209,20 @@ const _ = (Prism = {
       code
     };
 
-    _.hooks.run("before-highlight", env);
+    Prism.hooks.run("before-highlight", env);
 
-    if (async && _self.Worker) {
-      const worker = new Worker(_.filename);
+    if (async && Prismself.Worker) {
+      const worker = new Worker(Prism.filename);
 
       worker.onmessage = function(evt) {
         env.highlightedCode = Token.stringify(JSON.parse(evt.data), language);
 
-        _.hooks.run("before-insert", env);
+        Prism.hooks.run("before-insert", env);
 
         env.element.innerHTML = env.highlightedCode;
 
         callback && callback.call(env.element);
-        _.hooks.run("after-highlight", env);
+        Prism.hooks.run("after-highlight", env);
       };
 
       worker.postMessage(
@@ -232,25 +232,25 @@ const _ = (Prism = {
         })
       );
     } else {
-      env.highlightedCode = _.highlight(env.code, env.grammar, env.language);
+      env.highlightedCode = Prism.highlight(env.code, env.grammar, env.language);
 
-      _.hooks.run("before-insert", env);
+      Prism.hooks.run("before-insert", env);
 
       env.element.innerHTML = env.highlightedCode;
 
       callback && callback.call(element);
 
-      _.hooks.run("after-highlight", env);
+      Prism.hooks.run("after-highlight", env);
     }
   },
 
   highlight(text, grammar, language) {
-    const tokens = _.tokenize(text, grammar);
-    return Token.stringify(_.util.encode(tokens), language);
+    const tokens = Prism.tokenize(text, grammar);
+    return Token.stringify(Prism.util.encode(tokens), language);
   },
 
   tokenize(text, grammar, language) {
-    const Token = _.Token;
+    const Token = Prism.Token;
 
     const strarr = [text];
 
@@ -270,7 +270,7 @@ const _ = (Prism = {
       }
 
       let patterns = grammar[token];
-      patterns = _.util.type(patterns) === "Array" ? patterns : [patterns];
+      patterns = Prism.util.type(patterns) === "Array" ? patterns : [patterns];
 
       for (let j = 0; j < patterns.length; ++j) {
         let pattern = patterns[j],
@@ -319,7 +319,7 @@ const _ = (Prism = {
 
             const wrapped = new Token(
               token,
-              inside ? _.tokenize(match, inside) : match,
+              inside ? Prism.tokenize(match, inside) : match,
               alias
             );
 
@@ -342,7 +342,7 @@ const _ = (Prism = {
     all: {},
 
     add(name, callback) {
-      const hooks = _.hooks.all;
+      const hooks = Prism.hooks.all;
 
       hooks[name] = hooks[name] || [];
 
@@ -350,7 +350,7 @@ const _ = (Prism = {
     },
 
     run(name, env) {
-      const callbacks = _.hooks.all[name];
+      const callbacks = Prism.hooks.all[name];
 
       if (!callbacks || !callbacks.length) {
         return;
@@ -361,9 +361,9 @@ const _ = (Prism = {
       }
     }
   }
-});
+};
 
-const Token = (_.Token = function(type, content, alias) {
+const Token = (Prism.Token = function(type, content, alias) {
   this.type = type;
   this.content = content;
   this.alias = alias;
@@ -374,7 +374,7 @@ Token.reactify = function(o, language, parent, key) {
     return o;
   }
 
-  if (_.util.type(o) === "Array") {
+  if (Prism.util.type(o) === "Array") {
     return o.map((element, i) => {
       return Token.reactify(element, language, o, i);
     });
@@ -395,11 +395,11 @@ Token.reactify = function(o, language, parent, key) {
   }
 
   if (o.alias) {
-    const aliases = _.util.type(o.alias) === "Array" ? o.alias : [o.alias];
+    const aliases = Prism.util.type(o.alias) === "Array" ? o.alias : [o.alias];
     Array.prototype.push.apply(env.classes, aliases);
   }
 
-  _.hooks.run("wrap", env);
+  Prism.hooks.run("wrap", env);
 
   env.attributes.className = env.classes.join(" ");
 
@@ -1100,7 +1100,7 @@ Prism.languages.yaml = {
 
 const PrismComponent = React.createClass({
   statics: {
-    _
+    Prism
   },
   getDefaultProps() {
     return {
@@ -1123,10 +1123,10 @@ const PrismComponent = React.createClass({
         }
       });
     }
-    const grammar = _.languages[this.props.language];
+    const grammar = Prism.languages[this.props.language];
     return (
       <pre className={"prism language-" + this.props.language}>
-        {Token.reactify(_.tokenize(this.props.children, grammar))}
+        {Token.reactify(Prism.tokenize(this.props.children, grammar))}
         {lines.map((line, ii) => {
           return (
             <div

lib/start-server.js

@@ -10,10 +10,9 @@
  */
 
 require("babel-register")({
-  ignore: false,
   babelrc: false,
   plugins: [require("./server/translate-plugin.js")],
-  presets: ["react"]
+  presets: ["react", "latest", "stage-0"]
 });
 
 const program = require("commander");

package.json

@@ -6,7 +6,9 @@
     "examples": "./lib/copy-examples.js"
   },
   "dependencies": {
+    "babel-preset-latest": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.24.1",
     "babel-traverse": "^6.25.0",
     "babylon": "^6.17.4",

website/core/Footer.js

@@ -0,0 +1,84 @@
+/**
+ * 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 React = require("react");
+
+class Footer extends React.Component {
+  render() {
+    const currentYear = new Date().getFullYear();
+    return (
+      <footer className="nav-footer" id="footer">
+        <section className="sitemap">
+          <a href={this.props.config.baseUrl} className="nav-home">
+            <img
+              src={`${this.props.config.baseUrl}${this.props.config.footerIcon}`}
+              alt={this.props.config.title}
+              width="66"
+              height="58"
+            />
+          </a>
+          <div>
+            <h5>Docs</h5>
+            <a
+              href={`
+                ${this.props.config.baseUrl}docs/${this.props
+                .language}/getting-started.html`}
+            >
+              Getting Started
+            </a>
+          </div>
+          <div>
+            <h5>Community</h5>
+            <a
+              href={`${this.props.config.baseUrl}${this.props
+                .language}/users.html`}
+            >
+              User Showcase
+            </a>
+          </div>
+          <div>
+            <h5>More</h5>
+            <a href="https://github.com/facebookexperimental/docusaurus">
+              GitHub
+            </a>
+            <a
+              className="github-button"
+              href="https://github.com/facebookexperimental/docusaurus"
+              data-icon="octicon-star"
+              data-count-href="/facebookexperimental/docusaurus/stargazers"
+              data-count-api="/repos/facebookexperimental/docusaurus#stargazers_count"
+              data-count-aria-label="# stargazers on GitHub"
+              aria-label="Star this project on GitHub"
+            >
+              Star
+            </a>
+          </div>
+        </section>
+
+        <a
+          href="https://code.facebook.com/projects/"
+          target="_blank"
+          className="fbOpenSource"
+        >
+          <img
+            src={`${this.props.config.baseUrl}img/oss_logo.png`}
+            alt="Facebook Open Source"
+            width="170"
+            height="45"
+          />
+        </a>
+        <section className="copyright">
+          Copyright &copy; {currentYear} Facebook Inc.
+        </section>
+      </footer>
+    );
+  }
+}
+
+module.exports = Footer;

website/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "start": "../lib/start-server.js",
+    "build": "../lib/build-files.js",
+    "publish-gh-pages": "../lib/publish-gh-pages.js",
+    "examples": "../lib/copy-examples.js",
+    "write-translations": "../lib/write-translations.js"
+  }
+}

website/pages/en/help.js

@@ -0,0 +1,58 @@
+/**
+ * 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 React = require("react");
+
+const CompLibrary = require("../../core/CompLibrary.js");
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const siteConfig = require(process.cwd() + "/siteConfig.js");
+
+class Help extends React.Component {
+  static defaultProps = {
+    language: "en"
+  };
+
+  render() {
+    const supportLinks = [
+      {
+        content:
+          "Learn more using the [documentation on this site](/docusaurus/docs/en/getting-started.html).",
+        title: "Browse Docs"
+      },
+      {
+        content:
+          "Submit issues and pull requests for any new features you may want to see or bugs you've found on [GitHub](https://github.com/facebookexperimental/docusaurus).",
+        title: "Join the community"
+      },
+      {
+        content:
+          "Find out what's new with this project by checking back on the site.",
+        title: "Stay up to date"
+      }
+    ];
+
+    return (
+      <div className="docMainWrapper wrapper">
+        <Container className="mainContainer documentContainer postContainer">
+          <div className="post">
+            <header className="postHeader">
+              <h2>Need help?</h2>
+            </header>
+            <p>This project is maintained by a dedicated group of people.</p>
+            <GridBlock contents={supportLinks} layout="threeColumn" />
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+module.exports = Help;

website/pages/en/index.js

@@ -0,0 +1,209 @@
+/**
+ * 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 React = require("react");
+
+const CompLibrary = require("../../core/CompLibrary.js");
+const Marked = CompLibrary.Marked; /* Used to read markdown */
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const siteConfig = require(process.cwd() + "/siteConfig.js");
+
+class Button extends React.Component {
+  static defaultProps = {
+    target: "_self"
+  };
+
+  render() {
+    return (
+      <div className="pluginWrapper buttonWrapper">
+        <a className="button" href={this.props.href} target={this.props.target}>
+          {this.props.children}
+        </a>
+      </div>
+    );
+  }
+}
+
+class HomeSplash extends React.Component {
+  render() {
+    return (
+      <div className="homeContainer">
+        <div className="homeSplashFade">
+          <div className="wrapper homeWrapper">
+            <div className="projectLogo">
+              <img src={`${siteConfig.baseUrl}img/docusaurus.svg`} />
+            </div>
+            <div className="inner">
+              <h2 className="projectTitle">
+                {siteConfig.title}
+                <small>
+                  {siteConfig.tagline}
+                </small>
+              </h2>
+              <div className="section promoSection">
+                <div className="promoRow">
+                  <div className="pluginRowBlock">
+                    <Button
+                      href={`
+                        ${siteConfig.baseUrl}docs/${this.props
+                        .language}/getting-started.html
+                        `}
+                    >
+                      Get Started
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class Index extends React.Component {
+  render() {
+    let language = this.props.language || "en";
+    const showcase = siteConfig.users
+      .filter(user => {
+        return user.pinned;
+      })
+      .map(user => {
+        return (
+          <a href={user.infoLink}>
+            <img src={user.image} title={user.caption} />
+          </a>
+        );
+      });
+
+    return (
+      <div>
+        <HomeSplash language={language} />
+        <div className="mainContainer">
+          <Container padding={["bottom", "top"]}>
+            <GridBlock
+              align="center"
+              contents={[
+                {
+                  content:
+                    "Write all of your documentation and blog posts in Markdown and have it built into a website you can publish",
+                  image: `${siteConfig.baseUrl}img/markdown.png`,
+                  imageAlign: "top",
+                  title: "Markdown Documentation"
+                },
+                {
+                  content:
+                    "Write the content of your main pages as React components that automatically share a header and footer",
+                  image: `${siteConfig.baseUrl}img/react.svg`,
+                  imageAlign: "top",
+                  title: "React Main Pages"
+                },
+                {
+                  content:
+                    "Translate your docs and your website using Crowdin integration",
+                  image: `${siteConfig.baseUrl}img/translation.svg`,
+                  imageAlign: "top",
+                  title: "Translations"
+                }
+              ]}
+              layout="threeColumn"
+            />
+            <br />
+            <br />
+            <GridBlock
+              align="center"
+              contents={[
+                {
+                  content:
+                    "Support users of all versions by easily providing documentation for each version of your program",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
+                  imageAlign: "top",
+                  title: "Versioning"
+                },
+                {
+                  content:
+                    "Provide search for your documentation using Algolia DocSearch integration",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
+                  imageAlign: "top",
+                  title: "Document Search"
+                }
+              ]}
+              layout="twoColumn"
+            />
+          </Container>
+          <Container padding={["bottom", "top"]} background="light">
+            <GridBlock
+              contents={[
+                {
+                  content:
+                    "The provided site template lets you get a website for your project up and running quickly without having having to worry about all the site design. Provided example files help you configure your site.",
+                  imageAlign: "right",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
+                  title: "Quick Setup"
+                }
+              ]}
+              layout="twoColumn"
+            />
+          </Container>
+          <Container padding={["bottom", "top"]}>
+            <GridBlock
+              contents={[
+                {
+                  content:
+                    "Use a local server to see how file changes affect your website without having to reload the server. Publish your site to GitHub pages manually using a script or with continuous integration like CircleCI.",
+                  imageAlign: "left",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
+                  title: "Development and Deployment"
+                }
+              ]}
+              layout="twoColumn"
+            />
+          </Container>
+          <Container padding={["bottom", "top"]} background="light">
+            <GridBlock
+              contents={[
+                {
+                  content:
+                    "Docusaurus currently provides support to help your website use [translations](/docs/en/translation.html), [search](/docs/en/search.html), and [versioning](/docs/en/versioning.html), along with some other special [documentation markdown features](/docs/en/doc-markdown.html). If you have ideas for useful features, feel free to contribute on [GitHub](https://github.com/facebookexperimental/docusaurus)!",
+                  imageAlign: "right",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
+                  title: "Website Features"
+                }
+              ]}
+              layout="twoColumn"
+            />
+          </Container>
+
+          <div className="productShowcaseSection paddingBottom">
+            <h2>
+              {"Who's Using This?"}
+            </h2>
+            <p>Docusaurus is building websites for these projects</p>
+            <div className="logos">
+              {showcase}
+            </div>
+            <div className="more-users">
+              <a
+                className="button"
+                href={`${siteConfig.baseUrl}${this.props.language}/users.html`}
+              >
+                All Docusaurus Users
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = Index;

website/pages/en/users.js

@@ -0,0 +1,56 @@
+/**
+ * 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 React = require("react");
+
+const CompLibrary = require("../../core/CompLibrary.js");
+const Container = CompLibrary.Container;
+
+const siteConfig = require(process.cwd() + "/siteConfig.js");
+
+class Users extends React.Component {
+  render() {
+    const showcase = siteConfig.users.map(user => {
+      return (
+        <a href={user.infoLink}>
+          <img src={user.image} title={user.caption} />
+        </a>
+      );
+    });
+
+    return (
+      <div className="mainContainer">
+        <Container padding={["bottom", "top"]}>
+          <div className="showcaseSection">
+            <div className="prose">
+              <h1>Who's Using This?</h1>
+              <p>This project is used by many folks</p>
+            </div>
+            <div className="logos">
+              {showcase}
+            </div>
+            <p>Are you using this project?</p>
+            <a
+              href="https://github.com/deltice/test-site/edit/master/website/siteConfig.js"
+              className="button"
+            >
+              Add your company
+            </a>
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+Users.defaultProps = {
+  language: "en"
+};
+
+module.exports = Users;

website/sidebar.json

@@ -0,0 +1,11 @@
+{
+  "docs": {
+    "Docusaurus": [
+      "getting-started",
+      "site-config",
+      "doc-markdown",
+      "translation",
+      "search"
+    ]
+  }
+}

website/siteConfig.js

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+
+/* List of projects/orgs using your project for the users page */
+const users = [
+  {
+    caption: "Prettier",
+    image: "/docusaurus/img/prettier.png",
+    infoLink: "https://www.prettier.io",
+    pinned: true
+  }
+];
+
+const siteConfig = {
+  title: "Docusaurus",
+  tagline: "Open Source Documentation Websites",
+  url: "https://facebookexperimental.github.io",
+  baseUrl: "/docusaurus/",
+  projectName: "docusaurus",
+  users,
+  editUrl:
+    "https://github.com/facebookexperimental/docusaurus/edit/master/docs/",
+  headerLinksInternal: [
+    {
+      section: "docs",
+      href: "/docusaurus/docs/getting-started.html",
+      text: "Docs"
+    },
+    { section: "help", href: "/docusaurus/LANGUAGE/help.html", text: "Help" }
+  ],
+  headerLinksExternal: [
+    {
+      section: "github",
+      href: "https://github.com/facebookexperimental/docusaurus",
+      text: "GitHub"
+    }
+  ],
+  headerIcon: "img/docusaurus.svg",
+  footerIcon: "img/docusaurus.svg",
+  favicon: "img/favicon.png",
+  colors: {
+    primaryColor: "#2E8555",
+    secondaryColor: "#205C3B",
+    prismColor:
+      "rgba(46, 133, 85, 0.03)"
+  }
+};
+
+module.exports = siteConfig;

website/static/img/react.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
+<rect fill="none" width="600" height="600"/>
+<circle fill="#00D8FF" cx="299.529" cy="299.628" r="50.167"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M299.529,197.628
+	c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728
+	c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559
+	c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736,248.922
+	c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505
+	c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601
+	c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213
+	c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"/>
+<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821,351.482
+	c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566
+	c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582
+	c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499
+	C285.567,460.886,244.898,410.344,210.821,351.482z"/>
+</svg>

website/static/img/translation.svg

@@ -0,0 +1,3 @@
+<svg class="language {{include.class}}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="#000000" d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 0 1 1.229-.799l.082 4.277a2.773 2.773 0 0 1-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 0 0-.196-.145h-1.95a.194.194 0 0 0-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"/>
+</svg>