Bunch of small improvements to static pages (cruise-automation#55)

The biggest improvement is a new landing page that links to webviz-core
tool, Worldview docs, and Github.

Besides that I made a bunch of small improvements:
- Updated READMEs and made them all consistent with each other (same
  headlines and formatting and stuff).
- Added link and screenshot of basic example to regl-worldview README.
- Split out “Commands” section out of “API” section.
- Lots of minor language / docs improvements in regl-worldview docs.
- Fixed a bunch of broken links in docs.
- Made some example look better.
- Removed some unused scripts from package.json
- Fixed `docs-deploy` when it runs on CI (didn’t have a problem with
  `cp -f` and symlinks locally but on CI it doesn’t work).

README.md

@@ -1,34 +1,31 @@
-webviz is a collection of packages for visualizing 2D and 3D views on the web.
+# Webviz [![CircleCI](https://circleci.com/gh/cruise-automation/webviz.svg?style=svg)](https://circleci.com/gh/cruise-automation/webviz)
 
-- regl-worldview: React library for rendering 2D and 3D scenes using [regl](https://github.com/regl-project/regl).
-- react-key-listener: React component for handling keyboard events, without interfering with editable fields and buttons.
-- @cruise-automation/button: Button component that supports animated progress for destructive actions, "pulse" animation, and Bulma classes.
-- @cruise-automation/tooltip: React component using [popper.js](https://popper.js.org/) to add rich, customizable tooltips to DOM elements.
+**Webviz** is a web-based application for playback and visualization of [ROS](http://www.ros.org/) [bag files](http://wiki.ros.org/Bags). This repository also contains some libraries that can be used independently to build web-based visualization tools.
 
-## Documentation
+- **webviz-core** ([homepage](https://cruise-automation.github.io/webviz/webviz-core.html), [github](https://github.com/cruise-automation/webviz/tree/master/packages/webviz-core)): A tool to inspect [ROS bags](http://wiki.ros.org/ROS/Tutorials/Recording%20and%20playing%20back%20data).
+- **regl-worldview** ([homepage](https://cruise-automation.github.io/webviz/worldview), [npm](https://www.npmjs.com/package/regl-worldview), [github](https://github.com/cruise-automation/webviz/tree/master/packages/regl-worldview)): React library for rendering 2D and 3D scenes using [regl](https://github.com/regl-project/regl).
+- **react-key-listener** ([npm](https://www.npmjs.com/package/react-key-listener), [github](https://github.com/cruise-automation/webviz/tree/master/packages/react-key-listener)): React component for handling keyboard events, without interfering with editable fields and buttons.
+- **@cruise-automation/button** ([npm](https://www.npmjs.com/package/@cruise-automation/button), [github](https://github.com/cruise-automation/webviz/tree/master/packages/@cruise-automation/button)): React button component that supports animated progress for destructive actions, "pulse" animation, and Bulma classes.
+- **@cruise-automation/tooltip** ([npm](https://www.npmjs.com/package/@cruise-automation/tooltip), [github](https://github.com/cruise-automation/webviz/tree/master/packages/@cruise-automation/tooltip)): React component that uses [popper.js](https://popper.js.org/) to add rich, customizable tooltips to DOM elements.
 
-Visit [docs page](https://cruise-automation.github.io/webviz/) to see more guides, examples and APIs.
+Please see the individual package READMEs for details on how to install and use them.
 
 ## Developing
 
-- `npm run bootstrap` in the root directory to install dependencies
-- `npm run build` to run a single build or `npm run watch` to watch and build
-- `npm run storybook` in the root directory to run storybook
-- `npm run docs` to run the docs app
-
-## Flow
-
+- `npm run bootstrap` in the root directory to install dependencies.
+- `npm run build` to run a single build or `npm run watch` to watch and build.
+- `npm run storybook` to run storybook.
+- `npm run screenshot-debug` to generate screenshots from stories.
+- `npm run docs` to run the docs app.
+- `npm run lint` to run the linters (and `npm run lint:fix` to automatically fix issues).
 - `npm run flow` to run Flow.
 - `npm run flow-typed-rebuild` to update the flow-typed definitions (any time when changing packages).
+- `npm test` to run tests.
 
-## Testing
-
-- `npm test` in the root directory which will trigger jest to run in each package
-
-## Publishing
-
-- `npm run publish` in the root directory
+If you have the right permissions, you can publish:
+- `npm run publish` to publish npm packages.
+- `npm run docs-deploy` to deploy that statically hosted website (this is also done automatically in CI on the master branch).
 
 ## Contributing
 
-PRs and bug reports are welcome!
+PRs, bug reports, and feature requests are welcome! Please observe [CONTRIBUTING.md](CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) when making a contribution.

docs/public/index.html

@@ -0,0 +1,87 @@
+<!--
+  Copyright (c) 2018-present, GM Cruise LLC
+
+  This source code is licensed under the Apache License, Version 2.0,
+  found in the LICENSE file in the root directory of this source tree.
+  You may not use this file except in compliance with the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>Webviz</title>
+    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
+    <link rel="stylesheet" type="text/css" href="bootstrap-reboot.css">
+    <style>
+      html, body {
+        color: #f7f7f3;
+        background: #1f1e27;
+      }
+      body {
+        max-width: 500px;
+        padding: 20px;
+        margin: 1em auto;
+        text-align: center;
+      }
+      .monospace {
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+      }
+      .item {
+        display: inline-flex;
+        width: 290px;
+        height: 150px;
+        background: rgba(255, 255, 255, 0.1);
+        padding: 20px 30px;
+        border-radius: 4px;
+        margin-bottom: 1em;
+        flex-direction: column;
+        justify-content: space-evenly;
+        color: inherit;
+      }
+      .item:hover, item:focus {
+        background: rgba(255, 255, 255, 0.15);
+        color: inherit;
+        text-decoration: none;
+      }
+      .item-logo {
+        margin-bottom: 0.5em;
+      }
+      a {
+        color: #71b3fb;
+      }
+      a:hover {
+        color: #288fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="margin-bottom: 2em">
+      <strong>Webviz</strong> is a web-based application for playback and visualization of <a href="http://www.ros.org/">ROS</a> <a href="http://wiki.ros.org/Bags">bag files</a>. This repository also contains some libraries that can be used independently to build web-based visualization tools.
+    </div>
+
+    <div>
+      <a class="item" href="webviz-core.html">
+        <div class="item-logo">
+          <img src="webviz-logo.svg" width="70">
+          <span class="monospace" style="font-size: 1.5em; vertical-align: middle">webviz</span>
+        </div>
+        A tool to inspect ROS bags
+      </a>
+    </div>
+
+    <div>
+      <a class="item" href="worldview">
+        <div class="item-logo"><img src="worldview-logo.svg" width="230"></div>
+        Declarative rendering for interactive scenes
+      </a>
+    </div>
+
+    <div style="margin-bottom: 2em">
+      And more on <a href="https://github.com/cruise-automation/webviz">Github</a>.
+    </div>
+
+    <a href="https://getcruise.com"><img src="cruise-logo.svg" width="100"></a>
+  </body>
+</html>

docs/public/webviz-core.html

@@ -0,0 +1 @@
+../../packages/webviz-core/public/index.html

docs/public/worldview/index.html

@@ -13,6 +13,7 @@
     <meta name="theme-color" content="#000000" />
     <title>Worldview</title>
     <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
+    <link rel="stylesheet" type="text/css" href="../bootstrap-reboot.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

docs/src/1.2.Composition.mdx

@@ -2,6 +2,6 @@ import {Composition} from './jsx/allLiveEditors.js'
 
 # Composition
 
-Compose command components and DOM nodes to form new shapes inside the 2D/3D view.
+Compose command components and DOM nodes to form new shapes.
 
 <Composition />

docs/src/1.4.Interactivity.mdx

@@ -1,5 +1,5 @@
 import { Hitmap } from './jsx/allLiveEditors'
 
-# Hitmap
+# Interactivity
 
 <Hitmap />

docs/src/2.1.QuickStart.mdx

@@ -1,6 +1,6 @@
 # Quick Start
 
-Worldview is a react library for rendering 2D and 3D scenes using [regl](https://github.com/regl-project/regl).
+**Worldview** is a react library for rendering 2D and 3D scenes using [regl](https://github.com/regl-project/regl).
 
 Add regl-worldview to your React project:
 
@@ -10,6 +10,8 @@ npm install --save regl-worldview
 
 If you're not using a module bundler or package manager we also have a global ("UMD") build hosted on the unpkg CDN. Simply add the following script tag to the bottom of your HTML file:
 
-```js
+```html
 <script src="https://unpkg.com/regl-worldview/dist/regl-worldview.umd.min.js" />
 ```
+
+Then try rendering the [basic example](#/docs/examples/basicexample).