diff --git a/client/main.js b/client/main.js index b868a8b..ef7121d 100644 --- a/client/main.js +++ b/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(, document.getElementById("root")); diff --git a/client/About.css b/client/main/About.css similarity index 100% rename from client/About.css rename to client/main/About.css diff --git a/client/About.js b/client/main/About.js similarity index 82% rename from client/About.js rename to client/main/About.js index 219d7c2..bee1b31 100644 --- a/client/About.js +++ b/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
; diff --git a/client/main/About.md b/client/main/About.md new file mode 100644 index 0000000..15c7622 --- /dev/null +++ b/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). + +
+ + +
+ +### 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. diff --git a/client/App.js b/client/main/App.js similarity index 100% rename from client/App.js rename to client/main/App.js diff --git a/client/main/CloudflareLogo.png b/client/main/CloudflareLogo.png new file mode 100644 index 0000000..52f2820 Binary files /dev/null and b/client/main/CloudflareLogo.png differ diff --git a/client/main/HerokuLogo.png b/client/main/HerokuLogo.png new file mode 100644 index 0000000..cdc5379 Binary files /dev/null and b/client/main/HerokuLogo.png differ diff --git a/client/Home.css b/client/main/Home.css similarity index 100% rename from client/Home.css rename to client/main/Home.css diff --git a/client/Home.js b/client/main/Home.js similarity index 82% rename from client/Home.js rename to client/main/Home.js index 9984c60..e16d897 100644 --- a/client/Home.js +++ b/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
; diff --git a/client/main/Home.md b/client/main/Home.md new file mode 100644 index 0000000..4af3ba2 --- /dev/null +++ b/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: + +
unpkg.com/:package@:version/:file
+ +### 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 + +
+
`?meta`
+
Return metadata about any file in a package as JSON (e.g. `/any/file?meta`)
+ +
`?module`
+
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*
+
+ +### 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. diff --git a/client/Layout.css b/client/main/Layout.css similarity index 100% rename from client/Layout.css rename to client/main/Layout.css diff --git a/client/Layout.js b/client/main/Layout.js similarity index 100% rename from client/Layout.js rename to client/main/Layout.js diff --git a/client/Stats.css b/client/main/Stats.css similarity index 100% rename from client/Stats.css rename to client/main/Stats.css diff --git a/client/Stats.js b/client/main/Stats.js similarity index 98% rename from client/Stats.js rename to client/main/Stats.js index abba7ec..85b75f6 100644 --- a/client/Stats.js +++ b/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( diff --git a/client/WindowSize.js b/client/main/WindowSize.js similarity index 65% rename from client/WindowSize.js rename to client/main/WindowSize.js index f63e089..06faeb0 100644 --- a/client/WindowSize.js +++ b/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() {