Move main files into client/main

client/main.js

@@ -2,6 +2,7 @@ import "./main.css";
 
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+
+import App from "./main/App";
 
 ReactDOM.render(<App />, document.getElementById("root"));

client/main/About.js

@@ -2,7 +2,7 @@ import "./About.css";
 
 import React from "react";
 
-import html from "../docs/about.md";
+import html from "./About.md";
 
 function About() {
   return <div className="wrapper" dangerouslySetInnerHTML={{ __html: html }} />;

client/main/About.md

@@ -0,0 +1,40 @@
+unpkg is an [open source](https://github.com/unpkg) project built and maintained by [Michael Jackson](https://twitter.com/mjackson).
+
+### Sponsors
+
+The fast, global infrastructure that powers unpkg is generously donated by [Cloudflare](https://www.cloudflare.com) and [Heroku](https://www.heroku.com).
+
+<div class="about-logos">
+  <div class="about-logo">
+    <a href="https://www.cloudflare.com"><img src="CloudflareLogo.png"></a>
+  </div>
+  <div class="about-logo">
+    <a href="https://www.heroku.com"><img src="HerokuLogo.png"></a>
+  </div>
+</div>
+
+### Cache Behavior
+
+The CDN caches files based on their permanent URL, which includes the npm package version. This works because npm does not allow package authors to overwrite a package that has already been published with a different one at the same version number.
+
+URLs that do not specify a package version number redirect to one that does. This is the `latest` version when no version is specified, or the `maxSatisfying` version when a [semver version](https://github.com/npm/node-semver) is given. Redirects are cached for 5 minutes.
+
+Browsers are instructed (via the `Cache-Control` header) to cache assets for 4 hours.
+
+### Support
+
+unpkg is a free, best-effort service and cannot provide any uptime or support guarantees.
+
+I do my best to keep it running, but sometimes things go wrong. Sometimes there are network or provider issues outside my control. Sometimes abusive traffic temporarily affects response times. Sometimes I break things by doing something dumb, but I try not to.
+
+The goal of unpkg is to provide a hassle-free CDN for npm package authors. It's also a great resource for people creating demos and instructional material. However, if you rely on it to serve files that are crucial to your business, you should probably pay for a host with well-supported infrastructure and uptime guarantees.
+
+unpkg is not affiliated with or supported by npm, Inc. in any way. Please do not contact npm for help with unpkg.
+
+### Abuse
+
+unpkg maintains a list of packages that are known to be malicious. If you find such a package on npm, please let us know!
+
+### Feedback
+
+If you think this is useful, we'd love to hear from you. Please reach out to [@unpkg](https://twitter.com/unpkg) with any questions or concerns.

client/main/Home.js

@@ -2,7 +2,7 @@ import "./Home.css";
 
 import React from "react";
 
-import html from "../docs/home.md";
+import html from "./Home.md";
 
 function Home() {
   return <div className="wrapper" dangerouslySetInnerHTML={{ __html: html }} />;

client/main/Home.md

@@ -0,0 +1,48 @@
+unpkg is a fast, global [content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network) for everything on [npm](https://www.npmjs.com/). Use it to quickly and easily load any file from any package using a URL like:
+
+<div class="home-example">unpkg.com/:package@:version/:file</div>
+
+### Examples
+
+Using a fixed version:
+
+  * [unpkg.com/react@16.0.0/umd/react.production.min.js](/react@16.0.0/umd/react.production.min.js)
+  * [unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js](/react-dom@16.0.0/umd/react-dom.production.min.js)
+
+You may also use a [semver range](https://docs.npmjs.com/misc/semver) or a [tag](https://docs.npmjs.com/cli/dist-tag) instead of a fixed version number, or omit the version/tag entirely to use the `latest` tag.
+
+  * [unpkg.com/react@^16/umd/react.production.min.js](/react@^16/umd/react.production.min.js)
+  * [unpkg.com/react/umd/react.production.min.js](/react/umd/react.production.min.js)
+
+If you omit the file path (i.e. use a "bare" URL), unpkg will serve the file specified by the `unpkg` field in `package.json`, or fall back to `main`.
+
+  * [unpkg.com/d3](/d3)
+  * [unpkg.com/jquery](/jquery)
+  * [unpkg.com/three](/three)
+
+Append a `/` at the end of a URL to view a listing of all the files in a package.
+
+  * [unpkg.com/react/](/react/)
+  * [unpkg.com/lodash/](/lodash/)
+
+### Query Parameters
+
+<dl>
+  <dt>`?meta`</dt>
+  <dd>Return metadata about any file in a package as JSON (e.g. `/any/file?meta`)</dd>
+
+  <dt>`?module`</dt>
+  <dd>Expands all ["bare" `import` specifiers](https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier) in JavaScript modules to unpkg URLs. This feature is *very experimental*</dd>
+</dl>
+
+### Workflow
+
+For npm package authors, unpkg relieves the burden of publishing your code to a CDN in addition to the npm registry. All you need to do is include your [UMD](https://github.com/umdjs/umd) build in your npm package (not your repo, that's different!).
+
+You can do this easily using the following setup:
+
+  * Add the `umd` (or `dist`) directory to your `.gitignore` file
+  * Add the `umd` directory to your [files array](https://docs.npmjs.com/files/package.json#files) in `package.json`
+  * Use a build script to generate your UMD build in the `umd` directory when you publish
+
+That's it! Now when you `npm publish` you'll have a version available on unpkg as well.

client/main/Stats.js

@@ -7,8 +7,8 @@ import formatDate from "date-fns/format";
 import parseDate from "date-fns/parse";
 import { continents, countries } from "countries-list";
 
-import formatNumber from "./utils/formatNumber";
-import formatPercent from "./utils/formatPercent";
+import formatNumber from "../utils/formatNumber";
+import formatPercent from "../utils/formatPercent";
 
 function getCountriesByContinent(continent) {
   return Object.keys(countries).filter(

client/main/WindowSize.js

@@ -1,9 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import addEvent from "./utils/addEvent";
-import removeEvent from "./utils/removeEvent";
 
-const ResizeEvent = "resize";
+import addEvent from "../utils/addEvent";
+import removeEvent from "../utils/removeEvent";
+
+const resizeEvent = "resize";
 
 class WindowSize extends React.Component {
   static propTypes = {
@@ -19,11 +20,11 @@ class WindowSize extends React.Component {
   };
 
   componentDidMount() {
-    addEvent(window, ResizeEvent, this.handleWindowResize);
+    addEvent(window, resizeEvent, this.handleWindowResize);
   }
 
   componentWillUnmount() {
-    removeEvent(window, ResizeEvent, this.handleWindowResize);
+    removeEvent(window, resizeEvent, this.handleWindowResize);
   }
 
   render() {