web design (#1655)

3 files changed, 315 insertions, 222 deletions

diff --git a/Docs.md b/Docs.md
index 08bea8c2d..6de796def 100644
--- a/Docs.md
+++ b/Docs.md
@@ -19,7 +19,7 @@ scripts to download and install the binary.
 Using Shell:
 
 ```
-curl -L https://deno.land/x/install/install.sh | sh
+curl -fL https://deno.land/x/install/install.sh | sh
 ```
 
 Or using PowerShell:
@@ -63,6 +63,88 @@ Or see the [doc website](https://deno.land/typedoc/index.html).
 If you are embedding deno in a Rust program, see
 [the rust docs](https://deno.land/rustdoc/deno/index.html).
 
+## Build Instructions
+
+### Prerequisites:
+
+To ensure reproducible builds, deno has most of its dependencies in a git
+submodule. However, you need to install separately:
+
+1. [Rust](https://www.rust-lang.org/en-US/install.html) >= 1.31.1
+2. [Node](https://nodejs.org/)
+3. Python 2.
+   [Not 3](https://github.com/denoland/deno/issues/464#issuecomment-411795578).
+
+Extra steps for Mac users:
+
+1. [XCode](https://developer.apple.com/xcode/)
+2. Openssl 1.1: `brew install openssl@1.1` (TODO: shouldn't be necessary)
+
+Extra steps for Windows users:
+
+1. Add `python.exe` to `PATH` (e.g. `set PATH=%PATH%;C:\Python27\python.exe`)
+2. Get [VS Community 2017](https://www.visualstudio.com/downloads/) with
+   `Desktop development with C++` toolkit and make sure to select the following
+   required tools listed below along with all C++ tools.
+   - Windows 10 SDK >= 10.0.17134
+   - Visual C++ ATL for x86 and x64
+   - Visual C++ MFC for x86 and x64
+   - C++ profiling tools
+3. Enable `Debugging Tools for Windows`. Go to `Control Panel` → `Programs` →
+   `Programs and Features` → Select
+   `Windows Software Development Kit - Windows 10` → `Change` → `Change` → Check
+   `Debugging Tools For Windows` → `Change` -> `Finish`.
+
+### Build:
+
+    # Fetch deps.
+    git clone --recurse-submodules https://github.com/denoland/deno.git
+    cd deno
+    ./tools/setup.py
+
+    # You may need to ensure that sccache is running.
+    # (TODO it's unclear if this is necessary or not.)
+    # prebuilt/mac/sccache --start-server
+
+    # Build.
+    ./tools/build.py
+
+    # Run.
+    ./target/debug/deno tests/002_hello.ts
+
+    # Test.
+    ./tools/test.py
+
+    # Format code.
+    deno ./tools/format.ts
+
+Other useful commands:
+
+    # Call ninja manually.
+    ./third_party/depot_tools/ninja -C target/debug
+
+    # Build a release binary.
+    DENO_BUILD_MODE=release ./tools/build.py :deno
+
+    # List executable targets.
+    ./third_party/depot_tools/gn ls target/debug //:* --as=output --type=executable
+
+    # List build configuration.
+    ./third_party/depot_tools/gn args target/debug/ --list
+
+    # Edit build configuration.
+    ./third_party/depot_tools/gn args target/debug/
+
+    # Describe a target.
+    ./third_party/depot_tools/gn desc target/debug/ :deno
+    ./third_party/depot_tools/gn help
+
+    # Update third_party modules
+    git submodule update
+
+Environment variables: `DENO_BUILD_MODE`, `DENO_BUILD_PATH`, `DENO_BUILD_ARGS`,
+`DENO_DIR`.
+
 ## Tutorial
 
 ### An implementation of the unix "cat" program
@@ -306,90 +388,6 @@ Current executable set to '../deno/target/debug/deno' (x86_64).
 (lldb) r
 ```
 
-## Build Instructions _(for advanced users only)_
-
-### Prerequisites:
-
-To ensure reproducible builds, deno has most of its dependencies in a git
-submodule. However, you need to install separately:
-
-1. [Rust](https://www.rust-lang.org/en-US/install.html) >= 1.31.1
-2. [Node](https://nodejs.org/)
-3. Python 2.
-   [Not 3](https://github.com/denoland/deno/issues/464#issuecomment-411795578).
-4. [ccache](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/ccache)
-   (Optional but helpful for speeding up rebuilds of V8.)
-
-Extra steps for Mac users:
-
-1. [XCode](https://developer.apple.com/xcode/)
-2. Openssl 1.1: `brew install openssl@1.1` (TODO: shouldn't be necessary)
-
-Extra steps for Windows users:
-
-1. Add `python.exe` to `PATH` (e.g. `set PATH=%PATH%;C:\Python27\python.exe`)
-2. Get [VS Community 2017](https://www.visualstudio.com/downloads/) with
-   `Desktop development with C++` toolkit and make sure to select the following
-   required tools listed below along with all C++ tools.
-   - Windows 10 SDK >= 10.0.17134
-   - Visual C++ ATL for x86 and x64
-   - Visual C++ MFC for x86 and x64
-   - C++ profiling tools
-3. Enable `Debugging Tools for Windows`. Go to `Control Panel` → `Programs` →
-   `Programs and Features` → Select
-   `Windows Software Development Kit - Windows 10` → `Change` → `Change` → Check
-   `Debugging Tools For Windows` → `Change` -> `Finish`.
-
-### Build:
-
-    # Fetch deps.
-    git clone --recurse-submodules https://github.com/denoland/deno.git
-    cd deno
-    ./tools/setup.py
-
-    # You may need to ensure that sccache is running.
-    # (TODO it's unclear if this is necessary or not.)
-    # prebuilt/mac/sccache --start-server
-
-    # Build.
-    ./tools/build.py
-
-    # Run.
-    ./target/debug/deno tests/002_hello.ts
-
-    # Test.
-    ./tools/test.py
-
-    # Format code.
-    deno ./tools/format.ts
-
-Other useful commands:
-
-    # Call ninja manually.
-    ./third_party/depot_tools/ninja -C target/debug
-
-    # Build a release binary.
-    DENO_BUILD_MODE=release ./tools/build.py :deno
-
-    # List executable targets.
-    ./third_party/depot_tools/gn ls target/debug //:* --as=output --type=executable
-
-    # List build configuration.
-    ./third_party/depot_tools/gn args target/debug/ --list
-
-    # Edit build configuration.
-    ./third_party/depot_tools/gn args target/debug/
-
-    # Describe a target.
-    ./third_party/depot_tools/gn desc target/debug/ :deno
-    ./third_party/depot_tools/gn help
-
-    # Update third_party modules
-    git submodule update
-
-Environment variables: `DENO_BUILD_MODE`, `DENO_BUILD_PATH`, `DENO_BUILD_ARGS`,
-`DENO_DIR`.
-
 ## Internals
 
 ### Internal: libdeno API.
diff --git a/website/index.html b/website/index.html
index 8599c39a8..d36c0da9f 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,151 +1,246 @@
 <!-- Copyright 2018-2019 the Deno authors. All rights reserved. MIT license. -->
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Deno</title>
-  <link rel="manifest" href="/manifest.json">
-  <link rel="stylesheet" href="https://unpkg.com/c3@0.6.7/c3.min.css">
-  <link rel="stylesheet" href="style.css">
-  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
-</head>
-<body>
-  <main>
-    <img src="deno_logo_2.gif" width=150 />
-    <!-- Logo animation by hashrock -->
-
-    <h1>Deno</h1>
-
-    <table>
-      <tr>
-        <th>Linux &amp; Mac</th>
-        <th>Windows</th>
-      </tr>
-      <tr>
-        <td>
-          <a class="badge" href="https://travis-ci.com/denoland/deno"><img src="https://travis-ci.com/denoland/deno.svg?branch=master"/></a>
-        </td>
-        <td>
-          <a class="badge" href="https://ci.appveyor.com/project/deno/deno"><img src="https://ci.appveyor.com/api/projects/status/yel7wtcqwoy0to8x/branch/master?svg=true"/></a>
-        </td>
-      </tr>
-    </table>
-
-    <p>A new way to JavaScript
-
-    <p> <a href="https://github.com/denoland/deno">github.com/denoland/deno</a>
-
-    <p><a href="https://github.com/denoland/deno_std">github.com/denoland/deno_std</a>
-
-    <p><a href="https://github.com/denoland/deno_install">github.com/denoland/deno_install</a>
-
-    <p><a href="https://github.com/denoland/registry">github.com/denoland/registry</a>
-
-    <p> <a href="https://github.com/denoland/deno/blob/master/Docs.md">Documentation</a>
-
-    <p> <a href="typedoc/index.html">API Reference</a>
-
-    <p><a href="https://github.com/denolib/awesome-deno">Links to other Deno resources.</a>
-
-    <h2>Getting started</h2>
-
-    <p>Install Deno into ~/.deno/bin
-<h2>With Shell</h2>
-<pre>
-curl -L https://deno.land/x/install/install.sh | sh
-export PATH=$HOME/.deno/bin:$PATH
-</pre>
-<h2>With PowerShell</h2>
-<pre>
+  <head>
+    <title>Deno</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="https://unpkg.com/c3@0.6.7/c3.min.css" />
+    <link rel="stylesheet" href="style.css" />
+    <meta
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      name="viewport"
+    />
+  </head>
+  <body>
+    <main>
+      <img id="logo" src="deno_logo_2.gif" width="150" />
+      <!-- Logo by hashrock https://denolib.github.io/animated-deno-logo/ -->
+
+      <h1>Deno</h1>
+
+      <p>
+        A new way to JavaScript
+
+        <!-- TODO(ry) add the registry badges. -->
+      </p>
+
+      <table>
+        <tr>
+          <th></th>
+          <th>Linux &amp; Mac</th>
+          <th>Windows</th>
+        </tr>
+        <tr>
+          <th><a href="https://github.com/denoland/deno">deno</a></th>
+          <td>
+            <a class="badge" href="https://travis-ci.com/denoland/deno"
+              ><img src="https://travis-ci.com/denoland/deno.svg?branch=master"
+            /></a>
+          </td>
+          <td>
+            <a class="badge" href="https://ci.appveyor.com/project/deno/deno"
+              ><img
+                src="https://ci.appveyor.com/api/projects/status/yel7wtcqwoy0to8x/branch/master?svg=true"
+            /></a>
+          </td>
+        </tr>
+        <tr>
+          <th><a href="https://github.com/denoland/deno_std">deno_std</a></th>
+          <td colspan="2">
+            <a
+              class="badge"
+              href="https://dev.azure.com/denoland/deno_std/_build?definitionId=2"
+              ><img
+                src="https://dev.azure.com/denoland/deno_std/_apis/build/status/denoland.deno_std?branchName=master"
+            /></a>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <a href="https://github.com/denoland/deno_install">deno_install</a>
+          </th>
+          <td>
+            <a class="badge" href="https://travis-ci.com/denoland/deno_install"
+              ><img
+                src="https://travis-ci.com/denoland/deno_install.svg?branch=master"
+            /></a>
+          </td>
+          <td>
+            <a
+              class="badge"
+              href="https://ci.appveyor.com/project/deno/deno-install"
+              ><img
+                src="https://ci.appveyor.com/api/projects/status/gtekeaf7r60xa896?branch=master&svg=true"
+            /></a>
+          </td>
+        </tr>
+        <tr>
+          <th><a href="https://github.com/denoland/registry">registry</a></th>
+        </tr>
+      </table>
+
+      <p>
+        <a href="https://github.com/denoland/deno/blob/master/Docs.md"
+          >Documentation</a
+        >
+      </p>
+
+      <p><a href="typedoc/index.html">API Reference</a></p>
+
+      <p>
+        <a href="https://github.com/denolib/awesome-deno"
+          >Other Deno resources.</a
+        >
+      </p>
+
+      <h2>Install</h2>
+
+      <p>With Shell</p>
+      <pre>
+curl -fL https://deno.land/x/install/install.sh | sh
+</pre
+      >
+      <p>With PowerShell</p>
+      <pre>
 iex (iwr https://deno.land/x/install/install.ps1)
-</pre>
+</pre
+      >
 
-Try a Deno program. Install by bash alias.
-This one serves a local directory in HTTP.
-<pre>
+      <h2>Mini-tutorial</h2>
+
+      Try a Deno program. This one serves a local directory in HTTP.
+
+      <pre>
 alias file_server="deno \
   https://deno.land/x/http/file_server.ts --allow-net"
-</pre>
+</pre
+      >
 
-Run it:
-<pre>
+      Run it:
+      <pre>
 % file_server .
 Downloading https://deno.land/x/http/file_server.ts...
 [...]
 HTTP server listening on http://0.0.0.0:4500/
-</pre>
+</pre
+      >
 
-And if you ever want to upgrade to the latest published version:
-<pre>
+      And if you ever want to upgrade to the latest published version:
+      <pre>
 file_server --reload
-</pre>
-
-    <h2>Benchmarks</h2>
-
-    <h3>Execution time</h3>
-    This shows how much time total it takes to run a few simple deno programs:
-    <a href="https://github.com/denoland/deno/blob/master/tests/002_hello.ts">tests/002_hello.ts</a>
-    and
-    <a href="https://github.com/denoland/deno/blob/master/tests/003_relative_import.ts">tests/003_relative_import.ts</a>.
-    For deno to execute typescript, it must first compile it to JS.
-    A warm startup is when deno has a cached JS output already, so
-    it should be fast because it bypasses the TS compiler.
-    A cold startup is when deno must compile from scratch.
-    <div id="exec-time-chart"></div>
-
-    <h3>Throughput</h3>
-    Time it takes to pipe a certain amount of data through Deno.
-    <a href="https://github.com/denoland/deno/blob/master/tests/echo_server.ts">echo_server.ts</a>
-    and
-    <a href="https://github.com/denoland/deno/blob/master/tests/cat.ts">cat.ts</a>
-    Smaller is better.
-
-    <div id="throughput-chart"></div>
-
-    <h3>Req/Sec</h3>
-    Tests HTTP server performance. 10 keep-alive connections
-    do as many hello-world requests as possible. Bigger is better.
-    <ul>
-      <!-- TODO rename "deno" to "deno_tcp". -->
-      <li><a
-         href="https://github.com/denoland/deno/blob/master/tests/http_bench.ts">deno</a>
-        is a fake http server that doesn't parse HTTP. It is comparable to <a
-         href="https://github.com/denoland/deno/blob/master/tools/node_tcp.js">node_tcp</a>.
-      <li><a
-         href="https://github.com/denoland/deno_std/blob/master/http/http_bench.ts">deno_net_http</a>
-        is a web server written in TypeScript.  It
-        is comparable to <a
-         href="https://github.com/denoland/deno/blob/master/tools/node_http.js">node_http</a>.
-      <li><a
-         href="https://github.com/denoland/deno/blob/master/tools/hyper_hello.rs">hyper</a>
-        is a Rust HTTP server and represents an upper bound.
-    </ul>
-
-    <div id="req-per-sec-chart"></div>
-
-    <h3>Executable size</h3>
-    deno ships only a single binary. We track its size here.
-    <div id="binary-size-chart"></div>
-
-    <h3>Thread count</h3>
-    How many threads various programs use.
-    <div id="thread-count-chart"></div>
-
-    <h3>Syscall count</h3>
-    How many total syscalls are performed when executing a given script.
-    <div id="syscall-count-chart"></div>
-
-    <h3>References</h3>
-    <p> <a href="./all_benchmark.html">All benchmark data</a>
-
-  </main>
-  <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
-  <script src="https://unpkg.com/c3@0.6.7/c3.min.js"></script>
-
-  <script type="module">
-  import { drawCharts } from "./app.js";
-
-  drawCharts("recent.json");
-  </script>
-</body>
+</pre
+      >
+
+      <h2>Dig in...</h2>
+
+      <a href="https://github.com/denoland/deno/blob/master/Docs.md"
+        >Documentation</a
+      >
+
+      <p><a href="typedoc/index.html">API Reference</a></p>
+
+      <p>
+        <a href="https://github.com/denolib/awesome-deno"
+          >Links to other Deno resources.</a
+        >
+      </p>
+
+      <h2>Continuous Benchmarks</h2>
+
+      These plots are updated on every commit to
+      <a href="https://github.com/denoland/deno">master branch</a>.
+
+      <h3>Execution time</h3>
+      This shows how much time total it takes to run a few simple deno programs:
+      <a href="https://github.com/denoland/deno/blob/master/tests/002_hello.ts"
+        >tests/002_hello.ts</a
+      >
+      and
+      <a
+        href="https://github.com/denoland/deno/blob/master/tests/003_relative_import.ts"
+        >tests/003_relative_import.ts</a
+      >. For deno to execute typescript, it must first compile it to JS. A warm
+      startup is when deno has a cached JS output already, so it should be fast
+      because it bypasses the TS compiler. A cold startup is when deno must
+      compile from scratch.
+      <div id="exec-time-chart"></div>
+
+      <h3>Throughput</h3>
+      Time it takes to pipe a certain amount of data through Deno.
+      <a
+        href="https://github.com/denoland/deno/blob/master/tests/echo_server.ts"
+        >echo_server.ts</a
+      >
+      and
+      <a href="https://github.com/denoland/deno/blob/master/tests/cat.ts"
+        >cat.ts</a
+      >
+      Smaller is better.
+
+      <div id="throughput-chart"></div>
+
+      <h3>Req/Sec</h3>
+      Tests HTTP server performance. 10 keep-alive connections do as many
+      hello-world requests as possible. Bigger is better.
+      <ul>
+        <!-- TODO rename "deno" to "deno_tcp". -->
+        <li>
+          <a
+            href="https://github.com/denoland/deno/blob/master/tests/http_bench.ts"
+            >deno</a
+          >
+          is a fake http server that doesn't parse HTTP. It is comparable to
+          <a
+            href="https://github.com/denoland/deno/blob/master/tools/node_tcp.js"
+            >node_tcp</a
+          >.
+        </li>
+
+        <li>
+          <a
+            href="https://github.com/denoland/deno_std/blob/master/http/http_bench.ts"
+            >deno_net_http</a
+          >
+          is a web server written in TypeScript. It is comparable to
+          <a
+            href="https://github.com/denoland/deno/blob/master/tools/node_http.js"
+            >node_http</a
+          >.
+        </li>
+
+        <li>
+          <a
+            href="https://github.com/denoland/deno/blob/master/tools/hyper_hello.rs"
+            >hyper</a
+          >
+          is a Rust HTTP server and represents an upper bound.
+        </li>
+      </ul>
+
+      <div id="req-per-sec-chart"></div>
+
+      <h3>Executable size</h3>
+      deno ships only a single binary. We track its size here.
+      <div id="binary-size-chart"></div>
+
+      <h3>Thread count</h3>
+      How many threads various programs use.
+      <div id="thread-count-chart"></div>
+
+      <h3>Syscall count</h3>
+      How many total syscalls are performed when executing a given script.
+      <div id="syscall-count-chart"></div>
+
+      <p><a href="./all_benchmark.html">Historical benchmark data</a></p>
+    </main>
+
+    <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
+    <script src="https://unpkg.com/c3@0.6.7/c3.min.js"></script>
+
+    <script type="module">
+      import { drawCharts } from "./app.js";
+
+      drawCharts("recent.json");
+    </script>
+  </body>
 </html>
-
diff --git a/website/style.css b/website/style.css
index d3bb3261d..eaaf4b6fa 100644
--- a/website/style.css
+++ b/website/style.css
@@ -2,7 +2,7 @@
 body {
   color: #111;
   background: #f0f0f0;
-  margin: 80px 0;
+  margin: 1em;
   font-family: Arial;
   font-size: 20px;
 }