Metro Website scaffold

Reviewed By: jeanlauliac Differential Revision: D6396202 fbshipit-source-id: 9bfa3f88fdd747732566a95ded204f8f5206b350
2017-11-22 09:12:27 -08:00 · 2017-11-22 09:12:27 -08:00 · ef9b4b0f0f
parent 52a76cb5af
commit ef9b4b0f0f
26 changed files with 853 additions and 0 deletions
--- a/docs/API.md
+++ b/docs/API.md
@ -0,0 +1,16 @@
+---
+id: api
+title: API
+---
+
+## Methods
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+---
+
+## Reference
+
+### `todo(fn)`
+
+*TODO*
--- a/docs/CLI.md
+++ b/docs/CLI.md
@ -0,0 +1,11 @@
+---
+id: cli
+title: Metro CLI Options
+---
+
+The `metro` command line runner has a number of useful options. You can run `metro
+--help` to view all available options. Here is a brief overview:
+
+## Running from the command line
+
+*TODO*
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@ -0,0 +1,10 @@
+---
+id: configuration
+title: Configuring Metro
+---
+
+Metro's configuration can be defined in the `package.json` file of your project,
+or through a `metro.config.js` file or through the `--config <path/to/js>`
+option.
+
+*TODO*
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@ -0,0 +1,16 @@
+---
+id: getting-started
+title: Getting Started
+---
+
+Install Metro using `npm`:
+
+```
+npm install --save-dev metro-bundler
+```
+
+Or via [`yarn`](https://yarnpkg.com/en/package/jest):
+
+```
+yarn add --dev metro-bundler
+```
--- a/docs/Troubleshooting.md
+++ b/docs/Troubleshooting.md
@ -0,0 +1,12 @@
+---
+id: troubleshooting
+title: Troubleshooting
+---
+
+Uh oh, something went wrong? Use this guide to resolve issues with Metro.
+
+*TODO*
+
+### Still unresolved?
+
+See [Help](/jest/help.html).
--- a/website/README.md
+++ b/website/README.md
@ -0,0 +1,42 @@
+You will need Node 6 or newer in order to build the Metro website.
+
+# Run the server
+
+The first time, get all the dependencies loaded via
+
+```
+yarn
+```
+
+in the root directory.
+
+Then, run the server via
+
+```
+npm start
+Open http://localhost:3000
+```
+
+Anytime you change the contents, just refresh the page and it's going to be
+updated
+
+# Publish the website
+
+The Metro website is hosted as a GitHub page. A static site is generated by
+`server/generate.js` and its output is pushed to the `gh-pages` branch by
+CircleCI whenever `master` is updated.
+
+To deploy the website manually, run the following command as a Git user with
+write permissions:
+
+```
+DEPLOY_USER=facebook GIT_USER=metro-bot CIRCLE_PROJECT_USERNAME=facebook CIRCLE_PROJECT_REPONAME=metro-bundler npm run gh-pages
+```
+
+## Staging
+
+Run the above command against your own fork of `facebook/metro-bundler`:
+
+```
+DEPLOY_USER=YOUR_GITHUB_USERNAME GIT_USER=YOUR_GITHUB_USERNAME CIRCLE_PROJECT_USERNAME=YOUR_GITHUB_USERNAME CIRCLE_PROJECT_REPONAME=metro-bundler npm run gh-pages
+```
--- a/website/blog/2017-11-22-train-approaching.md
+++ b/website/blog/2017-11-22-train-approaching.md
@ -0,0 +1,8 @@
+---
+title: Train Approaching
+author: Christoph Pojer
+authorURL: http://twitter.com/cpojer
+authorFBID: 100000023028168
+---
+
+The Metro website is live.
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@ -0,0 +1,98 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+'use strict';
+
+const React = require('react');
+
+const githubButton = (
+  <a
+    className="github-button"
+    href="https://github.com/facebook/metro-bundler"
+    data-icon="octicon-star"
+    data-count-href="/facebook/metro-bundler/stargazers"
+    data-count-api="/repos/facebook/metro-bundler#stargazers_count"
+    data-count-aria-label="# stargazers on GitHub"
+    aria-label="Star this project on GitHub"
+  >
+    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>
+            <a
+              href={
+                this.props.config.baseUrl +
+                'docs/' +
+                this.props.language +
+                '/api.html'
+              }
+            >
+              API Reference
+            </a>
+          </div>
+          <div>
+            <h5>Community</h5>
+            <a
+              href="https://stackoverflow.com/questions/tagged/metrojs"
+              target="_blank"
+            >
+              Stack Overflow
+            </a>
+            <a href="https://twitter.com/MetroBundler" target="_blank">
+              Twitter
+            </a>
+          </div>
+          <div>
+            <h5>More</h5>
+            <a href={this.props.config.baseUrl + 'blog'}>Blog</a>
+            <a href="https://github.com/facebook/metro-bundler">GitHub</a>
+            {githubButton}
+          </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;
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@ -0,0 +1,39 @@
+{
+  "localized-strings": {
+    "next": "Next",
+    "previous": "Previous",
+    "tagline": "🚇 The JavaScript bundler for React Native",
+    "api": "API",
+    "cli": "Metro CLI Options",
+    "configuration": "Configuring Metro",
+    "getting-started": "Getting Started",
+    "troubleshooting": "Troubleshooting",
+    "Docs": "Docs",
+    "API": "API",
+    "Help": "Help",
+    "Blog": "Blog",
+    "GitHub": "GitHub",
+    "Introduction": "Introduction",
+    "API Reference": "API Reference",
+    "Guides": "Guides"
+  },
+  "pages-strings": {
+    "Find what you're looking for in our detailed documentation and guides.\\n\\n- Learn how to [get started](/metro-bundler/docs/en/getting-started.html) with Metro.\\n- [Troubleshoot](/metro-bundler/docs/en/troubleshooting.html) problems with Metro.\\n- Learn how to [configure Metro](/metro-bundler/docs/en/configuration.html).\\n- Look at the full [API Reference](/metro-bundler/docs/en/api.html).|no description given": "Find what you're looking for in our detailed documentation and guides.\\n\\n- Learn how to [get started](/metro-bundler/docs/en/getting-started.html) with Metro.\\n- [Troubleshoot](/metro-bundler/docs/en/troubleshooting.html) problems with Metro.\\n- Learn how to [configure Metro](/metro-bundler/docs/en/configuration.html).\\n- Look at the full [API Reference](/metro-bundler/docs/en/api.html).",
+    "Browse the docs|no description given": "Browse the docs",
+    "Ask questions and find answers from other Metro users like you.\\n\\n- Join the [#metro](https://discordapp.com/channels/102860784329052160/103622435865104384) channel on [Reactiflux](http://www.reactiflux.com/), a Discord community.\\n- Many members of the community use Stack Overflow. Read through the [existing questions](https://stackoverflow.com/questions/tagged/metrojs) tagged with **metrojs** or [ask your own](https://stackoverflow.com/questions/ask)!|no description given": "Ask questions and find answers from other Metro users like you.\\n\\n- Join the [#metro](https://discordapp.com/channels/102860784329052160/103622435865104384) channel on [Reactiflux](http://www.reactiflux.com/), a Discord community.\\n- Many members of the community use Stack Overflow. Read through the [existing questions](https://stackoverflow.com/questions/tagged/metrojs) tagged with **metrojs** or [ask your own](https://stackoverflow.com/questions/ask)!",
+    "Join the community|no description given": "Join the community",
+    "Find out what's new with Metro.\\n\\n- Follow [Metro](https://twitter.com/MetroBundler) on Twitter.\\n- Subscribe to the [Metro blog](/metro-bundler/blog/).|no description given": "Find out what's new with Metro.\\n\\n- Follow [Metro](https://twitter.com/MetroBundler) on Twitter.\\n- Subscribe to the [Metro blog](/metro-bundler/blog/).",
+    "Stay up to date|no description given": "Stay up to date",
+    "Need help?|no description given": "Need help?",
+    "Metro Bundler is worked on full-time by Facebook's JavaScript Foundation team. Team members are often around and available for questions.|no description given": "Metro Bundler is worked on full-time by Facebook's JavaScript Foundation team. Team members are often around and available for questions.",
+    "Get Started|no description given": "Get Started",
+    "Learn More|no description given": "Learn More",
+    "Metro aims for sub-second reload cycles, fast startup and quick bundling speeds.|no description given": "Metro aims for sub-second reload cycles, fast startup and quick bundling speeds.",
+    "Fast|no description given": "Fast",
+    "Works with thousands of modules in a single application.|no description given": "Works with thousands of modules in a single application.",
+    "Scalable|no description given": "Scalable",
+    "Supports every React Native project out of the box.|no description given": "Supports every React Native project out of the box.",
+    "Integrated|no description given": "Integrated",
+    "Help Translate|recruit community translators for your project": "Help Translate"
+  }
+}
--- a/website/languages.js
+++ b/website/languages.js
@ -0,0 +1,185 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ */
+
+'use strict';
+
+const languages = [
+  {
+    enabled: true,
+    name: 'English',
+    tag: 'en',
+  },
+  {
+    enabled: false,
+    name: '日本語',
+    tag: 'ja',
+  },
+  {
+    enabled: false,
+    name: 'العربية',
+    tag: 'ar',
+  },
+  {
+    enabled: false,
+    name: 'Bosanski',
+    tag: 'bs-BA',
+  },
+  {
+    enabled: false,
+    name: 'Català',
+    tag: 'ca',
+  },
+  {
+    enabled: false,
+    name: 'Čeština',
+    tag: 'cs',
+  },
+  {
+    enabled: false,
+    name: 'Dansk',
+    tag: 'da',
+  },
+  {
+    enabled: false,
+    name: 'Deutsch',
+    tag: 'de',
+  },
+  {
+    enabled: false,
+    name: 'Ελληνικά',
+    tag: 'el',
+  },
+  {
+    enabled: false,
+    name: 'Español',
+    tag: 'es-ES',
+  },
+  {
+    enabled: false,
+    name: 'فارسی',
+    tag: 'fa-IR',
+  },
+  {
+    enabled: false,
+    name: 'Suomi',
+    tag: 'fi',
+  },
+  {
+    enabled: false,
+    name: 'Français',
+    tag: 'fr',
+  },
+  {
+    enabled: false,
+    name: 'עִברִית',
+    tag: 'he',
+  },
+  {
+    enabled: false,
+    name: 'Magyar',
+    tag: 'hu',
+  },
+  {
+    enabled: false,
+    name: 'Bahasa Indonesia',
+    tag: 'id-ID',
+  },
+  {
+    enabled: false,
+    name: 'Italiano',
+    tag: 'it',
+  },
+  {
+    enabled: false,
+    name: 'Afrikaans',
+    tag: 'af',
+  },
+  {
+    enabled: false,
+    name: '한국어',
+    tag: 'ko',
+  },
+  {
+    enabled: false,
+    name: 'मराठी',
+    tag: 'mr-IN',
+  },
+  {
+    enabled: false,
+    name: 'Nederlands',
+    tag: 'nl',
+  },
+  {
+    enabled: false,
+    name: 'Norsk',
+    tag: 'no-NO',
+  },
+  {
+    enabled: false,
+    name: 'Polskie',
+    tag: 'pl',
+  },
+  {
+    enabled: false,
+    name: 'Português',
+    tag: 'pt-PT',
+  },
+  {
+    enabled: false,
+    name: 'Português (Brasil)',
+    tag: 'pt-BR',
+  },
+  {
+    enabled: false,
+    name: 'Română',
+    tag: 'ro',
+  },
+  {
+    enabled: false,
+    name: 'Русский',
+    tag: 'ru',
+  },
+  {
+    enabled: false,
+    name: 'Slovenský',
+    tag: 'sk-SK',
+  },
+  {
+    enabled: false,
+    name: 'Српски језик (Ћирилица)',
+    tag: 'sr',
+  },
+  {
+    enabled: false,
+    name: 'Svenska',
+    tag: 'sv-SE',
+  },
+  {
+    enabled: false,
+    name: 'Türkçe',
+    tag: 'tr',
+  },
+  {
+    enabled: false,
+    name: 'Українська',
+    tag: 'uk',
+  },
+  {
+    enabled: false,
+    name: 'Tiếng Việt',
+    tag: 'vi',
+  },
+  {
+    enabled: false,
+    name: '简体中文',
+    tag: 'zh-Hans',
+  },
+  {
+    enabled: false,
+    name: '繁體中文',
+    tag: 'zh-Hant',
+  },
+];
+module.exports = languages;
--- a/website/package.json
+++ b/website/package.json
@ -0,0 +1,23 @@
+{
+  "name": "metro-website",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus-start",
+    "build": "docusaurus-build",
+    "gh-pages": "docusaurus-publish",
+    "examples": "docusaurus-examples",
+    "crowdin-upload": "crowdin --config ../crowdin.yaml upload sources --auto-update -b master",
+    "crowdin-download": "crowdin --config ../crowdin.yaml download -b master",
+    "publish-gh-pages": "docusaurus-publish",
+    "write-translations": "docusaurus-write-translations",
+    "version": "docusaurus-version",
+    "rename-version": "docusaurus-rename-version"
+  },
+  "dependencies": {
+    "docusaurus": "1.0.0-beta.4"
+  },
+  "devDependencies": {
+    "crowdin-cli": "^0.3.0"
+  }
+}
--- a/website/pages/en/help.js
+++ b/website/pages/en/help.js
@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+const CompLibrary = require('../../core/CompLibrary.js');
+const React = require('react');
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const translate = require('../../server/translate.js').translate;
+
+class Help extends React.Component {
+  render() {
+    const supportLinks = [
+      {
+        content: (
+          <translate>
+            Find what you're looking for in our detailed documentation and
+            guides.\n\n- Learn how to [get
+            started](/metro-bundler/docs/en/getting-started.html) with Metro.\n-
+            [Troubleshoot](/metro-bundler/docs/en/troubleshooting.html) problems with
+            Metro.\n- Learn how to [configure
+            Metro](/metro-bundler/docs/en/configuration.html).\n- Look at the full [API
+            Reference](/metro-bundler/docs/en/api.html).
+          </translate>
+        ),
+        title: <translate>Browse the docs</translate>,
+      },
+      {
+        content: (
+          <translate>
+            Ask questions and find answers from other Metro users like you.\n\n-
+            Join the
+            [#metro](https://discordapp.com/channels/102860784329052160/103622435865104384)
+            channel on [Reactiflux](http://www.reactiflux.com/), a Discord
+            community.\n- Many members of the community use Stack Overflow. Read
+            through the [existing
+            questions](https://stackoverflow.com/questions/tagged/metrojs) tagged
+            with **metrojs** or [ask your
+            own](https://stackoverflow.com/questions/ask)!
+          </translate>
+        ),
+        title: <translate>Join the community</translate>,
+      },
+      {
+        content: (
+          <translate>
+            Find out what's new with Metro.\n\n- Follow
+            [Metro](https://twitter.com/MetroBundler) on Twitter.\n- Subscribe to the
+            [Metro blog](/metro-bundler/blog/).
+          </translate>
+        ),
+        title: <translate>Stay up to date</translate>,
+      },
+    ];
+
+    return (
+      <div className="docMainWrapper wrapper">
+        <Container className="mainContainer documentContainer postContainer">
+          <div className="post">
+            <header className="postHeader">
+              <h2>
+                <translate>Need help?</translate>
+              </h2>
+            </header>
+            <p>
+              <translate>
+                Metro Bundler is worked on full-time by Facebook's JavaScript Foundation team.
+                Team members are often around and available for questions.
+              </translate>
+            </p>
+            <GridBlock contents={supportLinks} layout="threeColumn" />
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+Help.defaultProps = {
+  language: 'en',
+};
+
+module.exports = Help;
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@ -0,0 +1,161 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+const CompLibrary = require('../../core/CompLibrary.js');
+const React = require('react');
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const translate = require('../../server/translate.js').translate;
+const translation = require('../../server/translation.js');
+
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+
+const githubButton = (
+  <a
+    className="github-button"
+    href="https://github.com/facebook/metro-bundler"
+    data-icon="octicon-star"
+    data-count-href="/facebook/metro-bundler/stargazers"
+    data-count-api="/repos/facebook/metro-bundler#stargazers_count"
+    data-count-aria-label="# stargazers on GitHub"
+    aria-label="Star facebook/metro-bundler on GitHub"
+  >
+    Star
+  </a>
+);
+
+class Button extends React.Component {
+  render() {
+    return (
+      <div className="pluginWrapper buttonWrapper">
+        <a className="button" href={this.props.href} target={this.props.target}>
+          {this.props.children}
+        </a>
+      </div>
+    );
+  }
+}
+
+Button.defaultProps = {
+  target: '_self',
+};
+
+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/metro.svg'}
+                alt="Metro"
+              />
+            </div>
+            <div className="inner">
+              <h2 className="projectTitle">
+                {siteConfig.title}
+                <small>
+                  {
+                    translation[this.props.language]['localized-strings']
+                      .tagline
+                  }
+                </small>
+              </h2>
+              <div className="section promoSection">
+                <div className="promoRow">
+                  <div className="pluginRowBlock">
+                    <Button
+                      href={
+                        siteConfig.baseUrl +
+                        'docs/' +
+                        this.props.language +
+                        '/getting-started.html'
+                      }
+                    >
+                      <translate>Get Started</translate>
+                    </Button>
+                    <Button
+                      href={
+                        siteConfig.baseUrl +
+                        'docs/' +
+                        this.props.language +
+                        '/snapshot-testing.html'
+                      }
+                    >
+                      <translate>Learn More</translate>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div className="githubButton" style={{minHeight: '20px'}}>
+                {githubButton}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class Index extends React.Component {
+  render() {
+    return (
+      <div>
+        <HomeSplash language={this.props.language} />
+        <div className="mainContainer">
+          <Container padding={['bottom', 'top']}>
+            <GridBlock
+              align="center"
+              contents={[
+                {
+                  content: (
+                    <translate>
+                      Metro aims for sub-second reload cycles, fast startup and quick bundling speeds.
+                    </translate>
+                  ),
+                  image: '/metro-bundler/img/content/high-speed-train.png',
+                  imageAlign: 'top',
+                  title: <translate>Fast</translate>,
+                },
+                {
+                  content: (
+                    <translate>
+                      Works with thousands of modules in a single application.
+                    </translate>
+                  ),
+                  image: '/metro-bundler/img/content/scales.png',
+                  imageAlign: 'top',
+                  title: <translate>Scalable</translate>,
+                },
+                {
+                  content: (
+                    <translate>
+                      Supports every React Native project out of the box.
+                    </translate>
+                  ),
+                  image: '/metro-bundler/img/content/atom.png',
+                  imageAlign: 'top',
+                  title: <translate>Integrated</translate>,
+                },
+              ]}
+              layout="fourColumn"
+            />
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = Index;
--- a/website/publish-gh-pages.js
+++ b/website/publish-gh-pages.js
@ -0,0 +1,66 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+/* eslint-disable */
+
+require(`shelljs/global`);
+
+const GIT_USER = process.env.GIT_USER;
+const CIRCLE_BRANCH = process.env.CIRCLE_BRANCH;
+const CIRCLE_PROJECT_USERNAME = process.env.CIRCLE_PROJECT_USERNAME;
+const CIRCLE_PROJECT_REPONAME = process.env.CIRCLE_PROJECT_REPONAME;
+const CI_PULL_REQUEST = process.env.CI_PULL_REQUEST;
+const remoteBranch = `https://${GIT_USER}@github.com/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}.git`;
+
+if (!which(`git`)) {
+  echo(`Sorry, this script requires git`);
+  exit(1);
+}
+
+if (CI_PULL_REQUEST || CIRCLE_BRANCH !== `master` || CIRCLE_PROJECT_USERNAME !== `facebook`) {
+  echo(`Skipping deploy`);
+  exit(0);
+}
+
+echo(`Building branch ${CIRCLE_BRANCH}, preparing to push to gh-pages`);
+
+// Clear out existing build folder
+rm(`-rf`, `build`);
+mkdir(`-p`, `build`);
+
+// Build site here
+cd(`build`);
+
+if (exec(`git clone ${remoteBranch} ${CIRCLE_PROJECT_REPONAME}-gh-pages`).code !== 0) {
+  echo(`Error: Git clone failed`);
+  exit(1);
+}
+
+cd(`${CIRCLE_PROJECT_REPONAME}-gh-pages`);
+
+if (exec(`git checkout origin/gh-pages`).code +
+    exec(`git checkout -b gh-pages`).code +
+    exec(`git branch --set-upstream-to=origin/gh-pages`).code !== 0
+    ) {
+  echo(`Error: Git checkout gh-pages failed`);
+  exit(1);
+}
+
+cd(`../..`);
+
+if (exec(`node server/generate.js`).code) {
+  echo(`Error: Generating HTML failed`);
+  exit(1);
+}
+
+cp(`-R`, `build/${CIRCLE_PROJECT_REPONAME}/*`, `build/${CIRCLE_PROJECT_REPONAME}-gh-pages/`);
+cd(`build/${CIRCLE_PROJECT_REPONAME}-gh-pages`);
+
+exec(`git add --all`);
+exec(`git commit -m "update website"`);
+if (exec(`git push origin gh-pages`).code !== 0) {
+  echo(`Error: Git push failed`);
+  exit(1);
+} else {
+  echo(`Website is live at: https://${CIRCLE_PROJECT_USERNAME}.github.io/${CIRCLE_PROJECT_REPONAME}/`);
+  exit(0);
+}
--- a/website/sidebars.json
+++ b/website/sidebars.json
@ -0,0 +1,15 @@
+{
+  "docs": {
+    "Introduction": [
+      "getting-started"
+    ],
+    "API Reference": [
+      "api",
+      "configuration",
+      "cli"
+    ],
+    "Guides": [
+      "troubleshooting"
+    ]
+  }
+}
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@ -0,0 +1,46 @@
+/*eslint sort-keys: 0*/
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const siteConfig = {
+  title: 'Metro',
+  tagline: '🚇 The JavaScript bundler for React Native',
+  url: 'https://facebook.github.io',
+  baseUrl: '/metro-bundler/',
+  projectName: 'metro-bundler',
+  repo: 'facebook/metro-bundler',
+  editUrl: 'https://github.com/facebook/metro-bundler/edit/master/docs/',
+  headerLinks: [
+    {doc: 'getting-started', label: 'Docs'},
+    {doc: 'api', label: 'API'},
+    {page: 'help', label: 'Help'},
+    {blog: true, label: 'Blog'},
+    {languages: true},
+    {search: true},
+    {href: 'https://github.com/facebook/metro-bundler', label: 'GitHub'},
+  ],
+  headerIcon: 'img/metro.svg',
+  footerIcon: 'img/metro.svg',
+  favicon: 'img/favicon/favicon.ico',
+  ogImage: 'img/opengraph.png',
+  recruitingLink: 'https://crowdin.com/project/metro-bundler',
+  algolia: {
+    apiKey: process.env.ALGOLIA_METRO_API_KEY,
+    indexName: 'metro',
+  },
+  gaTrackingId: 'UA-44373548-17',
+  colors: {
+    primaryColor: '#ef4242',
+    secondaryColor: '#f96e6e',
+    prismColor: 'rgba(153, 66, 79, 0.03)',
+  },
+};
+
+module.exports = siteConfig;
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@ -0,0 +1,7 @@
+h2.projectTitle {
+  color: #111;
+}
+
+h2.projectTitle small {
+  color: #ef4242;
+}
--- a/website/static/css/metro.css
+++ b/website/static/css/metro.css
@ -0,0 +1,3 @@
+.mainContainer {
+  flex: initial;
+}
--- a/website/static/img/content/atom.png
+++ b/website/static/img/content/atom.png
--- a/website/static/img/content/high-speed-train.png
+++ b/website/static/img/content/high-speed-train.png
--- a/website/static/img/content/scales.png
+++ b/website/static/img/content/scales.png
--- a/website/static/img/favicon.png
+++ b/website/static/img/favicon.png
--- a/website/static/img/language.svg
+++ b/website/static/img/language.svg
@ -0,0 +1,3 @@
+<svg class="language {{include.class}}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="#ffffff" 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>
--- a/website/static/img/metro.svg
+++ b/website/static/img/metro.svg
@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.89 156.99"><defs><style>.cls-1{fill:#ef4242;}.cls-2{fill:#fff;}</style></defs><title>Metro-Bundler_Logo_Final_2</title><path class="cls-1" d="M9.66,53.52C9.66,46,15,36.81,21.47,33.06L69.29,5.45c6.5-3.75,17.13-3.75,23.63,0l47.82,27.61c6.5,3.75,11.82,13,11.82,20.46v55.22c0,7.5-5.32,16.71-11.82,20.46L92.92,156.81c-6.5,3.75-17.13,3.75-23.63,0L21.47,129.2c-6.49-3.75-11.81-13-11.81-20.46Z" transform="translate(-9.66 -2.64)"/><path class="cls-2" d="M81.11,144.3a11.12,11.12,0,0,1-5.52-1.4L31.1,117.21a11.53,11.53,0,0,1-5.51-9.55V56.29a11.53,11.53,0,0,1,5.51-9.55L75.6,21.05a11.75,11.75,0,0,1,11,0l44.49,25.69a11.51,11.51,0,0,1,5.51,9.55v51.37a11.52,11.52,0,0,1-5.5,9.55L86.62,142.9A11.08,11.08,0,0,1,81.11,144.3Zm-43.7-37.09,43.7,25.23,43.7-25.23V56.74L81.11,31.51,37.41,56.74Z" transform="translate(-9.66 -2.64)"/><path class="cls-1" d="M81.11,131.14a6.64,6.64,0,0,1-3.32-.89L28.18,101.61a6.65,6.65,0,0,1-3.33-5.76V38.57A6.65,6.65,0,0,1,35,32.89l46.16,28,46.16-28a6.65,6.65,0,0,1,10.09,5.68V95.85a6.64,6.64,0,0,1-3.32,5.76L84.43,130.25A6.69,6.69,0,0,1,81.11,131.14ZM38.14,92l43,24.81,43-24.81V50.38l-39.51,24a6.63,6.63,0,0,1-6.9,0l-39.52-24Z" transform="translate(-9.66 -2.64)"/><path class="cls-2" d="M136.62,110.62H124.81V63.83L84.17,88.51a5.88,5.88,0,0,1-6.13,0L37.41,63.83v46.79H25.59V53.33a5.92,5.92,0,0,1,9-5L81.11,76.55l46.54-28.27a5.91,5.91,0,0,1,9,5Z" transform="translate(-9.66 -2.64)"/></svg>
--- a/website/static/img/opengraph.png
+++ b/website/static/img/opengraph.png
--- a/website/static/img/oss_logo.png
+++ b/website/static/img/oss_logo.png
				`@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.89 156.99"><defs><style>.cls-1{fill:#ef4242;}.cls-2{fill:#fff;}</style></defs><title>Metro-Bundler_Logo_Final_2</title><path class="cls-1" d="M9.66,53.52C9.66,46,15,36.81,21.47,33.06L69.29,5.45c6.5-3.75,17.13-3.75,23.63,0l47.82,27.61c6.5,3.75,11.82,13,11.82,20.46v55.22c0,7.5-5.32,16.71-11.82,20.46L92.92,156.81c-6.5,3.75-17.13,3.75-23.63,0L21.47,129.2c-6.49-3.75-11.81-13-11.81-20.46Z" transform="translate(-9.66 -2.64)"/><path class="cls-2" d="M81.11,144.3a11.12,11.12,0,0,1-5.52-1.4L31.1,117.21a11.53,11.53,0,0,1-5.51-9.55V56.29a11.53,11.53,0,0,1,5.51-9.55L75.6,21.05a11.75,11.75,0,0,1,11,0l44.49,25.69a11.51,11.51,0,0,1,5.51,9.55v51.37a11.52,11.52,0,0,1-5.5,9.55L86.62,142.9A11.08,11.08,0,0,1,81.11,144.3Zm-43.7-37.09,43.7,25.23,43.7-25.23V56.74L81.11,31.51,37.41,56.74Z" transform="translate(-9.66 -2.64)"/><path class="cls-1" d="M81.11,131.14a6.64,6.64,0,0,1-3.32-.89L28.18,101.61a6.65,6.65,0,0,1-3.33-5.76V38.57A6.65,6.65,0,0,1,35,32.89l46.16,28,46.16-28a6.65,6.65,0,0,1,10.09,5.68V95.85a6.64,6.64,0,0,1-3.32,5.76L84.43,130.25A6.69,6.69,0,0,1,81.11,131.14ZM38.14,92l43,24.81,43-24.81V50.38l-39.51,24a6.63,6.63,0,0,1-6.9,0l-39.52-24Z" transform="translate(-9.66 -2.64)"/><path class="cls-2" d="M136.62,110.62H124.81V63.83L84.17,88.51a5.88,5.88,0,0,1-6.13,0L37.41,63.83v46.79H25.59V53.33a5.92,5.92,0,0,1,9-5L81.11,76.55l46.54-28.27a5.91,5.91,0,0,1,9,5Z" transform="translate(-9.66 -2.64)"/></svg>