Use template strings, update React components, and update package.json files

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") {
+      } else if (Prism.util.type(tokens) === "Array") {
-        return tokens.map(_.util.encode);
+        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") {
+          if (Prism.util.type(o[i]) === "Object") {
-            _.languages.DFS(o[i], callback);
+            Prism.languages.DFS(o[i], callback);
-          } else if (_.util.type(o[i]) === "Array") {
+          } else if (Prism.util.type(o[i]) === "Array") {
-            _.languages.DFS(o[i], callback, i);
+            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) {
+    if (async && Prismself.Worker) {
-      const worker = new Worker(_.filename);
+      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);
+    const tokens = Prism.tokenize(text, grammar);
-    return Token.stringify(_.util.encode(tokens), language);
+    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

@@ -9,7 +9,44 @@
 
 const React = require("react");
 
-const githubButton = (
+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"
@@ -21,49 +58,6 @@ const githubButton = (
             >
               Star
             </a>
-);
-
-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>
-            {githubButton}
           </div>
         </section>
 
@@ -73,7 +67,7 @@ class Footer extends React.Component {
           className="fbOpenSource"
         >
           <img
-            src={this.props.config.baseUrl + "img/oss_logo.png"}
+            src={`${this.props.config.baseUrl}img/oss_logo.png`}
             alt="Facebook Open Source"
             width="170"
             height="45"

website/package.json

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

website/pages/en/help.js

@@ -16,6 +16,10 @@ const GridBlock = CompLibrary.GridBlock;
 const siteConfig = require(process.cwd() + "/siteConfig.js");
 
 class Help extends React.Component {
+  static defaultProps = {
+    language: "en"
+  };
+
   render() {
     const supportLinks = [
       {
@@ -24,11 +28,13 @@ class Help extends React.Component {
         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).",
+        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.",
+        content:
+          "Find out what's new with this project by checking back on the site.",
         title: "Stay up to date"
       }
     ];
@@ -49,8 +55,4 @@ class Help extends React.Component {
   }
 }
 
-Help.defaultProps = {
-  language: "en"
-};
-
 module.exports = Help;

website/pages/en/index.js

@@ -17,6 +17,10 @@ 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">
@@ -28,10 +32,6 @@ class Button extends React.Component {
   }
 }
 
-Button.defaultProps = {
-  target: "_self"
-};
-
 class HomeSplash extends React.Component {
   render() {
     return (
@@ -39,7 +39,7 @@ class HomeSplash extends React.Component {
         <div className="homeSplashFade">
           <div className="wrapper homeWrapper">
             <div className="projectLogo">
-              <img src={siteConfig.baseUrl + "img/docusaurus.svg"} />
+              <img src={`${siteConfig.baseUrl}img/docusaurus.svg`} />
             </div>
             <div className="inner">
               <h2 className="projectTitle">
@@ -52,12 +52,10 @@ class HomeSplash extends React.Component {
                 <div className="promoRow">
                   <div className="pluginRowBlock">
                     <Button
-                      href={
+                      href={`
-                        siteConfig.baseUrl +
+                        ${siteConfig.baseUrl}docs/${this.props
-                        "docs/" +
+                        .language}/getting-started.html
-                        this.props.language +
+                        `}
-                        "/getting-started.html"
-                      }
                     >
                       Get Started
                     </Button>
@@ -98,21 +96,21 @@ class Index extends React.Component {
                 {
                   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",
+                  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",
+                  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",
+                  image: `${siteConfig.baseUrl}img/translation.svg`,
                   imageAlign: "top",
                   title: "Translations"
                 }
@@ -127,14 +125,14 @@ class Index extends React.Component {
                 {
                   content:
                     "Support users of all versions by easily providing documentation for each version of your program",
-                  image: siteConfig.baseUrl + "img/docusaurus.svg",
+                  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",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
                   imageAlign: "top",
                   title: "Document Search"
                 }
@@ -149,7 +147,7 @@ class Index extends React.Component {
                   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",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
                   title: "Quick Setup"
                 }
               ]}
@@ -163,7 +161,7 @@ class Index extends React.Component {
                   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",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
                   title: "Development and Deployment"
                 }
               ]}
@@ -177,7 +175,7 @@ class Index extends React.Component {
                   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",
+                  image: `${siteConfig.baseUrl}img/docusaurus.svg`,
                   title: "Website Features"
                 }
               ]}
@@ -196,10 +194,7 @@ class Index extends React.Component {
             <div className="more-users">
               <a
                 className="button"
-                href={
+                href={`${siteConfig.baseUrl}${this.props.language}/users.html`}
-                  siteConfig.baseUrl + this.props.language + "/" + "users.html"
-                }
-                target="_self"
               >
                 All Docusaurus Users
               </a>