Add content to website (#2377)

* Add content to website

* Fix linting error

* Cleanup, extract content to JSON files

README.md

@@ -168,14 +168,14 @@ A few of the [many projects](https://www.npmjs.com/browse/depended/prettier) usi
 
 <table>
 <tr>
-<td><p align="center"><a href="https://facebook.github.io/react/"><img src="images/react-200x100.png" alt="React" width="200" height="100"><br>React</a></p></td>
-<td><p align="center"><a href="https://facebook.github.io/jest/"><img src="images/jest-200x100.png" alt="Jest" width="200" height="100"><br>Jest</a></p></td>
-<td><p align="center"><a href="https://yarnpkg.com"><img src="images/yarn-200x100.png" alt="Yarn" width="200" height="100"><br>Yarn</a></p></td>
+<td><p align="center"><a href="https://facebook.github.io/react/"><img src="website/static/images/react-200x100.png" alt="React" width="200" height="100"><br>React</a></p></td>
+<td><p align="center"><a href="https://facebook.github.io/jest/"><img src="website/static/images/jest-200x100.png" alt="Jest" width="200" height="100"><br>Jest</a></p></td>
+<td><p align="center"><a href="https://yarnpkg.com"><img src="website/static/images/yarn-200x100.png" alt="Yarn" width="200" height="100"><br>Yarn</a></p></td>
 </tr>
 <tr>
-<td><p align="center"><a href="https://babeljs.io/"><img src="images/babel-200x100.png" alt="Babel" width="200" height="100"><br>Babel</a></p></td>
-<td><p align="center"><a href="https://zeit.co/"><img src="images/zeit-200x100.png" alt="Zeit" width="200" height="100"><br>Zeit</a></p></td>
-<td><p align="center"><a href="https://webpack.js.org/api/cli/"><img src="images/webpack-200x100.png" alt="Webpack-cli" width="200" height="100"><br>Webpack-cli</a></p></td>
+<td><p align="center"><a href="https://babeljs.io/"><img src="website/static/images/babel-200x100.png" alt="Babel" width="200" height="100"><br>Babel</a></p></td>
+<td><p align="center"><a href="https://zeit.co/"><img src="website/static/images/zeit-200x100.png" alt="Zeit" width="200" height="100"><br>Zeit</a></p></td>
+<td><p align="center"><a href="https://webpack.js.org/api/cli/"><img src="website/static/images/webpack-200x100.png" alt="Webpack-cli" width="200" height="100"><br>Webpack-cli</a></p></td>
 </tr>
 </table>
 

docs/en/editors.md

@@ -0,0 +1,46 @@
+---
+id: editors
+title: Editor Integration
+layout: docs
+category: Prettier
+permalink: docs/en/editors.html
+previous: options
+---
+
+
+## Atom
+
+Atom users can simply install the [prettier-atom](https://github.com/prettier/prettier-atom) package and use
+`Ctrl+Alt+F` to format a file (or format on save if enabled).
+
+## Emacs
+
+Emacs users should see [this repository](https://github.com/prettier/prettier-emacs)
+for on-demand formatting.
+
+## Vim
+
+Vim users can simply install either [sbdchd](https://github.com/sbdchd)/[neoformat](https://github.com/sbdchd/neoformat), [w0rp](https://github.com/w0rp)/[ale](https://github.com/w0rp/ale), or [mitermayer](https://github.com/mitermayer)/[vim-prettier](https://github.com/mitermayer/vim-prettier), for more details see [this directory](https://github.com/prettier/prettier/tree/master/editors/vim).
+
+## Visual Studio Code
+
+Can be installed using the extension sidebar. Search for `Prettier - JavaScript formatter`.
+
+Can also be installed using `ext install prettier-vscode`.
+
+[Check its repository for configuration and shortcuts](https://github.com/esbenp/prettier-vscode)
+
+## Visual Studio
+
+Install the [JavaScript Prettier extension](https://github.com/madskristensen/JavaScriptPrettier).
+
+## Sublime Text
+
+Sublime Text support is available through Package Control and
+the [JsPrettier](https://packagecontrol.io/packages/JsPrettier) plug-in.
+
+## JetBrains WebStorm, PHPStorm, PyCharm...
+
+See the [WebStorm
+guide](https://github.com/jlongster/prettier/tree/master/editors/webstorm/README.md).
+

docs/en/options.md

@@ -0,0 +1,136 @@
+---
+id: options
+title: Options
+layout: docs
+category: Prettier
+permalink: docs/en/options.html
+previous: usage
+next: editors
+---
+
+Prettier ships with a handful of customizable format options, usable in both the CLI and API.
+
+## Print Width
+Specify the length of line that the printer will wrap on.
+
+**We strongly recommend against using more than 80 columns.**
+
+Prettier works by cramming as much content as possible until it reaches the limit, which happens to work well for 80 columns but makes lines that are very crowded. When a bigger column count is used in styleguides, it usually means that code is allowed to go beyond 80 columns, but not to make every single line go there, like Prettier would do.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`80` | `--print-width <int>` | `printWidth: <int>`
+
+## Tab Width
+Specify the number of spaces per indentation-level.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+ `2` | `--tab-width <int>` | `tabWidth: <int>`
+
+## Tabs
+Indent lines with tabs instead of spaces
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`false` | `--use-tabs` | `useTabs: <bool>`
+
+## Semicolons
+Print semicolons at the ends of statements.
+
+Valid options:
+
+ * `true` - Add a semicolon at the end of every statement.
+ * `false` - Only add semicolons at the beginning of lines that may introduce ASI failures.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`true` | `--no-semi` | `semi: <bool>`
+
+## Quotes
+Use single quotes instead of double quotes.
+
+Notes:
+* Quotes in JSX will always be double and ignore this setting.
+* If the number of quotes outweighs the other quote, the quote which is less used will be used to format the string - Example: `"I'm double quoted"` results in `"I'm double quoted"` and `"This \"example\" is single quoted"` results in `'This "example" is single quoted'`.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`false` |  `--single-quote` | `singleQuote: <bool>`
+
+## Trailing Commas
+Print trailing commas wherever possible.
+
+Valid options:
+ * `"none"` - No trailing commas.
+ * `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.)
+ * `"all"` - Trailing commas wherever possible (function arguments). This requires node 8 or a [transform](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/).
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`"none"` | <code>--trailing-comma <none&#124;es5&#124;all></code> | <code>trailingComma: "<none&#124;es5&#124;all>"</code>
+
+## Bracket Spacing
+Print spaces between brackets in object literals.
+
+Valid options:
+ * `true` - Example: `{ foo: bar }`.
+ * `false` - Example: `{foo: bar}`.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`true` | `--no-bracket-spacing` | `bracketSpacing: <bool>`
+
+## JSX Brackets
+Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>`
+
+## Range
+Format only a segment of a file.
+
+These two options can be used to format code starting and ending at a given character offset (inclusive and exclusive, respectively). The range will extend:
+* Backwards to the start of the first line containing the selected statement.
+* Forwards to the end of the selected statement.
+
+These options cannot be used with `cursorOffset`.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`0`        | `--range-start <int>`| `rangeStart: <int>`
+`Infinity` | `--range-end <int>`  | `rangeEnd: <int>`
+
+## Parser
+Specify which parser to use.
+
+Both the `babylon` and `flow` parsers support the same set of JavaScript features (including Flow). Prettier automatically infers the parser from the input file path, so you shouldn't have to change this setting.
+
+Built-in parsers:
+ * [`babylon`](https://github.com/babel/babylon/)
+ * [`flow`](https://github.com/facebook/flow/tree/master/src/parser)
+ * [`typescript`](https://github.com/eslint/typescript-eslint-parser) _Since v1.4.0_
+ * [`postcss`](https://github.com/postcss/postcss) _Since v1.4.0_
+ * [`json`](https://github.com/vtrushin/json-to-ast) _Since v1.5.0_
+ * [`graphql`](https://github.com/graphql/graphql-js/tree/master/src/language) _Since v1.5.0_
+
+[Custom parsers](#custom-parser-api) are also supported.  _Since v1.5.0_
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`babylon` | `--parser <string>`<br />`--parser ./my-parser` | `parser: "<string>"`<br />`parser: require("./my-parser")`
+
+## Filepath
+Specify the input filepath. This will be used to do parser inference.
+
+For example, the following will use `postcss` parser:
+
+```bash
+cat foo | prettier --stdin-filepath foo.css
+```
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+None | `--stdin-filepath <string>` | `filepath: "<string>"`
+

docs/en/usage.md

@@ -0,0 +1,256 @@
+---
+id: usage
+title: Usage
+layout: docs
+category: Prettier
+permalink: docs/en/usage.html
+previous: why-prettier
+next: options
+---
+
+
+## Install
+
+```
+yarn add prettier --dev
+```
+
+You can install it globally if you like:
+
+```
+yarn global add prettier
+```
+
+*We're using `yarn` but you can use `npm` if you like:*
+
+```
+npm install [--save-dev|--global] prettier
+```
+
+## CLI
+
+Run Prettier through the CLI with this script. Run it without any
+arguments to see the [options](#options).
+
+To format a file in-place, use `--write`. You may want to consider
+committing your code before doing that, just in case.
+
+```bash
+prettier [opts] [filename ...]
+```
+
+In practice, this may look something like:
+
+```bash
+prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
+```
+
+Don't forget the quotes around the globs! The quotes make sure that Prettier
+expands the globs rather than your shell, for cross-platform usage.
+The [glob syntax from the glob module](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer)
+is used.
+
+Prettier CLI will ignore files located in `node_modules` directory. To opt-out from this behavior use `--with-node-modules` flag.
+
+If you're worried that Prettier will change the correctness of your code, add `--debug-check` to the command.
+This will cause Prettier to print an error message if it detects that code correctness might have changed.
+Note that `--write` cannot be used with `--debug-check`.
+
+Another useful flag is `--list-different` (or `-l`) which prints the filenames of files that are different from Prettier formatting. If there are differences the script errors out, which is useful in a CI scenario.
+
+```bash
+prettier --single-quote --list-different "src/**/*.js"
+```
+
+## ESLint
+
+If you are using ESLint, integrating Prettier to your workflow is straightforward:
+
+Just add Prettier as an ESLint rule using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
+
+```js
+yarn add --dev prettier eslint-plugin-prettier
+
+// .eslintrc
+{
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
+```
+
+We also recommend that you use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all the existing formatting rules. It's a one liner that can be added on-top of any existing ESLint configuration.
+
+```
+$ yarn add --dev eslint-config-prettier
+```
+
+.eslintrc.json:
+
+```json
+{
+  "extends": [
+    "prettier"
+  ]
+}
+```
+
+
+## Pre-commit Hook
+
+You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
+
+#### Option 1. [lint-staged](https://github.com/okonet/lint-staged)
+
+Install it along with [husky](https://github.com/typicode/husky):
+
+```bash
+yarn add lint-staged husky --dev
+```
+
+and add this config to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}
+```
+
+See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
+
+
+#### Option 2. [pre-commit](https://github.com/pre-commit/pre-commit)
+
+Copy the following config in your pre-commit config yaml file:
+
+```yaml
+
+    -   repo: https://github.com/awebdeveloper/pre-commit-prettier
+        sha: ''  # Use the sha or tag you want to point at
+        hooks:
+        -   id: prettier
+            additional_dependencies: ['prettier@1.4.2']
+
+ ```
+
+Find more info from [here](https://github.com/awebdeveloper/pre-commit-prettier).
+
+#### Option 3. bash script
+
+Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
+
+```bash
+!/bin/sh
+jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
+[ -z "$jsfiles" ] && exit 0
+
+diffs=$(node_modules/.bin/prettier -l $jsfiles)
+[ -z "$diffs" ] && exit 0
+
+echo "here"
+echo >&2 "Javascript files must be formatted with Prettier. Please run:"
+echo >&2 "node_modules/.bin/prettier --write "$diffs""
+
+exit 1
+```
+
+## API
+
+The API has three functions:  `format`, `check`, and `formatWithCursor`.
+
+```js
+const prettier = require("prettier");
+```
+
+### `prettier.format(source [, options])`
+
+`format` is used to format text using Prettier. [Options](#options) may be provided to override the defaults.
+
+```js
+prettier.format("foo ( );", { semi: false });
+// -> "foo()"
+```
+
+### `prettier.check(source [, options])`
+
+`check` checks to see if the file has been formatted with Prettier given those options and returns a `Boolean`.
+This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
+
+### `prettier.formatWithCursor(source [, options])`
+
+`formatWithCursor` both formats the code, and translates a cursor position from unformatted code to formatted code.
+This is useful for editor integrations, to prevent the cursor from moving when code is formatted.
+
+The `cursorOffset` option should be provided, to specify where the cursor is. This option cannot be used with `rangeStart` and `rangeEnd`.
+
+```js
+prettier.formatWithCursor(" 1", { cursorOffset: 2 });
+// -> { formatted: '1;\n', cursorOffset: 1 }
+```
+
+### Custom Parser API
+
+If you need to make modifications to the AST (such as codemods), or you want to provide an alternate parser, you can do so by setting the `parser` option to a function. The function signature of the parser function is:
+```js
+(text: string, parsers: object, options: object) => AST;
+```
+
+Prettier's built-in parsers are exposed as properties on the `parsers` argument.
+
+```js
+prettier.format("lodash ( )", {
+  parser(text, { babylon }) {
+    const ast = babylon(text);
+    ast.program.body[0].expression.callee.name = "_";
+    return ast;
+  }
+});
+// -> "_();\n"
+```
+
+The `--parser` CLI option may be a path to a node.js module exporting a parse function.
+
+## Excluding code from formatting
+
+A JavaScript comment of `// prettier-ignore` will exclude the next node in the abstract syntax tree from formatting.
+
+For example:
+
+```js
+matrix(
+  1, 0, 0,
+  0, 1, 0,
+  0, 0, 1
+)
+
+// prettier-ignore
+matrix(
+  1, 0, 0,
+  0, 1, 0,
+  0, 0, 1
+)
+```
+
+will be transformed to:
+
+```js
+matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
+
+// prettier-ignore
+matrix(
+  1, 0, 0,
+  0, 1, 0,
+  0, 0, 1
+)
+```

docs/en/why-prettier.md

@@ -4,11 +4,13 @@ title: Why Prettier?
 layout: docs
 category: Prettier
 permalink: docs/en/why-prettier.html
+next: usage
 ---
 
 ## Building and enforcing a style guide
 
 By far the biggest reason for adopting prettier is to stop all the ongoing debates over styles. It is generally accepted that having a common style guide is valuable for a project & team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.
+
 - “We want to free mental threads and end discussions around style. While sometimes fruitful, these discussions are for the most part wasteful.”
 - “Literally had an engineer go through a huge effort of cleaning up all of our code because we were debating ternary style for the longest time and were inconsistent about it. It was dumb, but it was a weird on-going "great debate" that wasted lots of little back and forth bits. It's far easier for us all to agree now: just run prettier, and go with that style.”
 - “Getting tired telling people how to style their product code.”
@@ -20,6 +22,7 @@ By far the biggest reason for adopting prettier is to stop all the ongoing debat
 ## Helping Newcomers
 
 Prettier is usually introduced by people with experience in the current codebase and JavaScript but the people that disproportionally benefit from it are newcomers to the codebase. One may think that it's only useful for people with very limited programming experience, but we've seen it quicken the ramp up time from experienced engineers joining the company, as they likely used a different coding style before, and developers coming from a different programming language.
+
 - “My motivations for using Prettier are: appearing that I know how to write JavaScript well.”
 - “I always put spaces in the wrong place, now I don't have to worry about it anymore.”
 - “When you're a beginner you're making a lot of mistakes caused by the syntax. Thanks to Prettier, you can reduce these mistakes and save a lot of time to focus on what really matters.”
@@ -28,6 +31,7 @@ Prettier is usually introduced by people with experience in the current codebase
 ## Writing code
 
 What usually happens once people are using prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With prettier editor integration, you can just press that magic key binding and poof, the code is formatted. This is an eye opening experience if anything else.
+
 - “I want to write code. Not spend cycles on formatting.”
 - “It removed 5% that sucks in our daily life - aka formatting”
 - “We're in 2017 and it's still painful to break a call into multiple lines when you happen to add an argument that makes it go over the 80 columns limit :(“
@@ -35,6 +39,7 @@ What usually happens once people are using prettier is that they realize that th
 ## Easy to adopt
 
 We've worked very hard to use the least controversial coding styles, went through many rounds of fixing all the edge cases and polished the getting started experience. When you're ready to push prettier into your codebase, not only should it be painless for you to do it technically but the newly formatted codebase should not generate major controversy and be accepted painlessly by your co-workers.
+
 - “It's low overhead. We were able to throw Prettier at very different kinds of repos without much work.”
 - “It's been mostly bug free. Had there been major styling issues during the course of implementation we would have been wary about throwing this at our JS codebase. I'm happy to say that's not the case.”
 - “Everyone runs it as part of their pre commit scripts, a couple of us use the editor on save extensions as well.”
@@ -44,12 +49,14 @@ We've worked very hard to use the least controversial coding styles, went throug
 ## Clean up an existing codebase
 
 Since coming up with a coding style and enforcing it is a big undertaking, it often slips through the cracks and you are left working on inconsistent codebases. Running prettier in this case is a quick win, the codebase is now uniform and easier to read without spending hardly any time.
+
 - “Take a look at the code :) I just need to restore sanity.”
 - “We inherited a ~2000 module ES6 code base, developed by 20 different developers over 18 months, in a global team. Felt like such a win without much research.
 
 ## Ride the hype train
 
 Purely technical aspects of the projects aren't the only thing people look into when choosing to adopt prettier. Who built and uses it and how quickly it spreads through the community have a non trivial impact.
+
 - “The amazing thing, for me, is: 1) Announced 2 months ago. 2) Already adopted by, it seems, every major JS project. 3) 7000 stars, 100,000 npm downloads/mo”
 - “Was built by the same people as React & React Native.”
 - “I like to be part of the hot new things.”

package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "babel-cli": "6.24.1",
     "babel-preset-es2015": "6.24.1",
+    "cross-env": "5.0.1",
     "cross-spawn": "5.1.0",
     "eslint": "4.1.1",
     "eslint-friendly-formatter": "3.0.0",
@@ -61,7 +62,7 @@
   "scripts": {
     "test": "jest",
     "test-integration": "jest tests_integration",
-    "lint": "EFF_NO_LINK_RULES=true eslint . --format 'node_modules/eslint-friendly-formatter'",
+    "lint": "cross-env EFF_NO_LINK_RULES=true eslint . --format node_modules/eslint-friendly-formatter",
     "build": "./scripts/build/build.js"
   },
   "jest": {

website/core/Footer.js

@@ -20,6 +20,10 @@ GithubButton.propTypes = {
 };
 
 class Footer extends React.Component {
+  url(path) {
+    return this.props.config.baseUrl + "docs/" + this.props.language + path;
+  }
+
   render() {
     // const currentYear = new Date().getFullYear();
     return (
@@ -33,59 +37,39 @@ class Footer extends React.Component {
           </a>
           <div>
             <h5>Docs</h5>
-            <a
-              href={
-                this.props.config.baseUrl +
-                "docs/" +
-                this.props.language +
-                "/why-prettier.html"
-              }
-            >
-              Getting Started (or other categories)
+            <a href={this.url("/why-prettier.html")}>
+              Why Prettier?
             </a>
-            <a
-              href={
-                this.props.config.baseUrl +
-                "docs/" +
-                this.props.language +
-                "/why-prettier.html"
-              }
-            >
-              Guides (or other categories)
+            <a href={this.url("/usage.html")}>
+              Usage
             </a>
-            <a
-              href={
-                this.props.config.baseUrl +
-                "docs/" +
-                this.props.language +
-                "/why-prettier.html"
-              }
-            >
-              API Reference (or other categories)
+            <a href={this.url("/options.html")}>
+              Options
+            </a>
+            <a href={this.url("/editors.html")}>
+              Editor Integeration
             </a>
           </div>
           <div>
             <h5>Community</h5>
-            <a
-              href={this.props.config.baseUrl + this.props.language + "/users/"}
-            >
+            <a href={this.url("/users/")}>
               User Showcase
             </a>
             <a
-              href="http://stackoverflow.com/questions/tagged/"
+              href="http://stackoverflow.com/questions/tagged/prettier"
               target="_blank"
               rel="noopener noreferrer"
             >
               Stack Overflow
             </a>
             <a href="https://gitter.im/jlongster/prettier">Chat on Gitter</a>
-            <a
+            {/*<a
               href="https://twitter.com/"
               target="_blank"
               rel="noopener noreferrer"
             >
               Twitter
-            </a>
+            </a>*/}
           </div>
           <div>
             <h5>More</h5>

website/editors.json

@@ -0,0 +1,37 @@
+[
+    {
+        "image": "/images/atom-128px.png",
+        "name": "Atom",
+        "content": "[`prettier-atom`](https://github.com/prettier/prettier-atom)"
+    },
+    {
+        "image": "/images/emacs-128px.png",
+        "name": "Emacs",
+        "content": "[`prettier-emacs`](https://github.com/prettier/prettier-emacs)"
+    },
+    {
+        "image": "/images/vim-128px.png",
+        "name": "vim",
+        "content": "[`neoformat`](https://github.com/sbdchd/neoformat), [`ale`](https://github.com/w0rp/ale), [`vim-prettier`](https://github.com/mitermayer/vim-prettier)"
+    },
+    {
+        "image": "/images/vscode-128px.png",
+        "name": "Visual Studio Code",
+        "content": "[`prettier-vscode`](https://github.com/esbenp/prettier-vscode)"
+    },
+    {
+        "image": "/images/visualstudio-128px.png",
+        "name": "Visual Studio",
+        "content": "[`JavaScriptPrettier`](https://github.com/madskristensen/JavaScriptPrettier)"
+    },
+    {
+        "image": "/images/sublimetext-128px.png",
+        "name": "Sublime Text",
+        "content": "[`JsPrettier`](https://packagecontrol.io/packages/JsPrettier)"
+    },
+    {
+        "image": "/images/webstorm-128px.png",
+        "name": "WebStorm",
+        "content": "[External Tool](https://github.com/prettier/prettier/blob/master/editors/webstorm/README.md)"
+    }
+]

website/languages.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "JavaScript",
+        "image": "/images/js-128px.png",
+        "variants": [
+            "[ES2017](https://github.com/tc39/proposals/blob/master/finished-proposals.md)",
+            "[JSX](https://facebook.github.io/jsx/)",
+            "[Flow](https://flow.org/)",
+            "[TypeScript](https://www.typescriptlang.org/)",
+            "[JSON](http://json.org/)"
+        ]
+    },
+    {
+        "name": "CSS",
+        "image": "/images/css-128px.png",
+        "variants": [
+            "CSS3+",
+            "[LESS](http://lesscss.org/)",
+            "[SCSS](http://sass-lang.com)",
+            "[styled-components](http://styled-components.com) 💅",
+            "[styled-jsx](http://npmjs.com/styled-jsx)"
+        ]
+    },
+    {
+        "name": "GraphQL",
+        "image": "/images/graphql-128px.png",
+        "variants": [
+            "[GraphQL](http://graphql.org/)",
+            "[GraphQL Schemas](http://graphql.org/learn/schema/)"
+        ]
+    }
+]

website/pages/en/index.js

@@ -3,7 +3,7 @@
 const React = require("react");
 
 const CompLibrary = require("../../core/CompLibrary.js");
-const Marked = CompLibrary.Marked; /* Used to read markdown */
+// const Marked = CompLibrary.Marked; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
@@ -50,18 +50,14 @@ class HomeSplash extends React.Component {
                   <div className="pluginRowBlock">
                     <Button href="/playground/">Try It Out</Button>
                     <Button
-                      href={
-                        "/docs/" + this.props.language + "/why-prettier.html"
-                      }
+                      href={"/docs/" + this.props.language + "/usage.html"}
                     >
-                      Example Link
+                      Get Started
                     </Button>
                     <Button
-                      href={
-                        "/docs/" + this.props.language + "/why-prettier.html"
-                      }
+                      href={"/docs/" + this.props.language + "/options.html"}
                     >
-                      Example Link 2
+                      Options
                     </Button>
                   </div>
                 </div>
@@ -89,6 +85,8 @@ class Index extends React.Component {
         return (
           <a key={i} href={user.infoLink}>
             <img src={user.image} title={user.caption} />
+            <br />
+            {user.caption}
           </a>
         );
       });
@@ -98,49 +96,58 @@ class Index extends React.Component {
         <script src="redirect.js" />
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Container padding={["bottom", "top"]}>
-            <GridBlock
-              align="center"
-              contents={[
-                {
-                  content: "This is the content of my feature",
-                  image: "/prettier.png",
-                  imageAlign: "top",
-                  title: "Feature One"
-                },
-                {
-                  content: "The content of my second feature",
-                  image: "/prettier.png",
-                  imageAlign: "top",
-                  title: "Feature Two"
-                }
-              ]}
-              layout="fourColumn"
-            />
-          </Container>
-
           <div
+            className="productShowcaseSection lightBackground paddingTop paddingBottom"
+            style={{ textAlign: "center" }}
+          >
+            <h2 style={{ margin: 0 }}>Language Support</h2>
+            <Container>
+              <GridBlock
+                align="center"
+                contents={siteConfig.supportedLanguages.map(language => ({
+                  title: language.name,
+                  image: language.image,
+                  imageAlign: "top",
+                  content: language.variants.join("\n\n")
+                }))}
+                layout="fourColumn"
+              />
+            </Container>
+          </div>
+
+          {/*<div
             className="productShowcaseSection paddingBottom"
             style={{ textAlign: "center" }}
           >
             <h2>Feature Callout</h2>
             <Marked>These are features of this project</Marked>
+          </div>*/}
+
+          <div className="productShowcaseSection paddingBottom">
+            <h2>Editor Integration</h2>
+            <Container>
+              <GridBlock
+                align="center"
+                contents={siteConfig.editors.map(editor => ({
+                  content: editor.content || "",
+                  image: editor.image,
+                  imageAlign: "bottom",
+                  title: editor.name
+                }))}
+                layout="fourColumn"
+              />
+            </Container>
+
+            <p>Developed an integration?</p>
+            <a
+              href={`${siteConfig.githubUrl}/edit/master/website/editors.json`}
+              className="button"
+            >
+              Add it here
+            </a>
           </div>
 
-          <Container padding={["bottom", "top"]} background="light">
-            <GridBlock
-              contents={[
-                {
-                  content: "Talk about learning how to use this",
-                  image: "/prettier.png",
-                  imageAlign: "right",
-                  title: "Learn How"
-                }
-              ]}
-            />
-          </Container>
-
-          <Container padding={["bottom", "top"]} background="dark">
+          {/*<Container padding={["bottom", "top"]} background="dark">
             <GridBlock
               contents={[
                 {
@@ -152,9 +159,9 @@ class Index extends React.Component {
                 }
               ]}
             />
-          </Container>
+          </Container>*/}
 
-          <div className="productShowcaseSection paddingBottom">
+          <div className="productShowcaseSection paddingTop paddingBottom lightBackground">
             <h2>Who{"'"}s Using Prettier?</h2>
             <p>
               A few of the

website/pages/en/users/index.js

@@ -38,7 +38,7 @@ class Users extends React.Component {
               </div>
               <p>Are you using this project?</p>
               <a
-                href={`${siteConfig.githubUrl}/edit/master/website/siteConfig.js`}
+                href={`${siteConfig.githubUrl}/edit/master/website/users.json`}
                 className="button"
               >
                 Add your company

website/siteConfig.js

@@ -5,45 +5,9 @@ const fs = require("fs");
 const PACKAGE = require("../package");
 const GITHUB_URL = `https://github.com/${PACKAGE.repository}`;
 
-/* List of projects/orgs using your project for the users page */
-const users = [
-  {
-    caption: "React",
-    image: `${GITHUB_URL}/raw/master/images/react-200x100.png`,
-    infoLink: "https://facebook.github.io/react/",
-    pinned: true
-  },
-  {
-    caption: "Jest",
-    image: `${GITHUB_URL}/raw/master/images/jest-200x100.png`,
-    infoLink: "https://facebook.github.io/jest/",
-    pinned: true
-  },
-  {
-    caption: "Yarn",
-    image: `${GITHUB_URL}/raw/master/images/yarn-200x100.png`,
-    infoLink: "https://yarnpkg.com",
-    pinned: true
-  },
-  {
-    caption: "Babel",
-    image: `${GITHUB_URL}/raw/master/images/babel-200x100.png`,
-    infoLink: "https://babeljs.jo",
-    pinned: true
-  },
-  {
-    caption: "Zeit",
-    image: `${GITHUB_URL}/raw/master/images/zeit-200x100.png`,
-    infoLink: "https://zeit.co/",
-    pinned: true
-  },
-  {
-    caption: "Webpack CLI",
-    image: `${GITHUB_URL}/raw/master/images/webpack-200x100.png`,
-    infoLink: "https://webpack.js.org/api/cli/",
-    pinned: true
-  }
-];
+const users = require("./users");
+const editors = require("./editors");
+const supportedLanguages = require("./languages");
 
 const siteConfig = {
   title: "Prettier",
@@ -53,6 +17,8 @@ const siteConfig = {
   projectName: PACKAGE.name,
   repo: PACKAGE.repository,
   users,
+  editors,
+  supportedLanguages,
   /* base url for editing docs, usage example: editUrl + 'en/doc1.md' */
   editUrl: `${GITHUB_URL}/edit/master/docs/`,
   /* header links for links on this site, 'LANGUAGE' will be replaced by whatever
@@ -63,12 +29,7 @@ const siteConfig = {
       href: "/docs/LANGUAGE/why-prettier.html",
       text: "Docs"
     },
-    {
-      section: "api",
-      href: "/docs/LANGUAGE/why-prettier.html",
-      text: "API"
-    },
-    { section: "help", href: "/LANGUAGE/help/", text: "Help" },
+    // { section: "help", href: "/LANGUAGE/help/", text: "Help" },
     // {section: 'blog', href: '/test-site/blog', text: 'Blog'},
     {
       section: "playground",

website/users.json

@@ -0,0 +1,38 @@
+[
+  {
+    "caption": "React",
+    "image": "/images/react-200x100.png",
+    "infoLink": "https://facebook.github.io/react/",
+    "pinned": true
+  },
+  {
+    "caption": "Jest",
+    "image": "/images/jest-200x100.png",
+    "infoLink": "https://facebook.github.io/jest/",
+    "pinned": true
+  },
+  {
+    "caption": "Yarn",
+    "image": "/images/yarn-200x100.png",
+    "infoLink": "https://yarnpkg.com",
+    "pinned": true
+  },
+  {
+    "caption": "Babel",
+    "image": "/images/babel-200x100.png",
+    "infoLink": "https://babeljs.jo",
+    "pinned": true
+  },
+  {
+    "caption": "Zeit",
+    "image": "/images/zeit-200x100.png",
+    "infoLink": "https://zeit.co/",
+    "pinned": true
+  },
+  {
+    "caption": "Webpack CLI",
+    "image": "/images/webpack-200x100.png",
+    "infoLink": "https://webpack.js.org/api/cli/",
+    "pinned": true
+  }
+]

yarn.lock

@@ -1019,7 +1019,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-spawn@5.1.0:
+cross-env@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.0.1.tgz#ff4e72ea43b47da2486b43a7f2043b2609e44913"
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
+cross-spawn@5.1.0, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
@@ -1930,6 +1937,10 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-windows@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"