Streamline home page
This commit is contained in:
Michael Jackson
@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Switch, Route, Link, withRouter } from 'react-router-dom';
|
||||
import { Motion, spring } from 'react-motion';
|
||||
import formatBytes from 'pretty-bytes';
|
||||
import formatDate from 'date-fns/format';
|
||||
import parseDate from 'date-fns/parse';
|
||||
|
||||
import WindowSize from './WindowSize';
|
||||
import About from './About';
|
||||
import Stats from './Stats';
|
||||
import Home from './Home';
|
||||
import formatNumber from '../utils/formatNumber';
|
||||
import formatPercent from '../utils/formatPercent';
|
||||
|
||||
import cloudflareLogo from './CloudflareLogo.png';
|
||||
import herokuLogo from './HerokuLogo.png';
|
||||
|
||||
const styles = {
|
||||
title: {
|
||||
@ -40,44 +42,60 @@ const styles = {
|
||||
backgroundColor: 'black',
|
||||
position: 'absolute',
|
||||
left: 0
|
||||
},
|
||||
example: {
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#eee',
|
||||
margin: '2em 0',
|
||||
padding: '5px 0'
|
||||
},
|
||||
logoList: {
|
||||
margin: '2em 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
logo: {
|
||||
textAlign: 'center',
|
||||
flex: '1',
|
||||
maxWidth: '80%'
|
||||
},
|
||||
logoImage: {
|
||||
maxWidth: '60%'
|
||||
}
|
||||
};
|
||||
|
||||
class Layout extends React.Component {
|
||||
state = {
|
||||
underlineLeft: 0,
|
||||
underlineWidth: 0,
|
||||
useSpring: false,
|
||||
stats: null
|
||||
};
|
||||
function AboutLogo({ children }) {
|
||||
return <div style={styles.logo}>{children}</div>;
|
||||
}
|
||||
|
||||
adjustUnderline = (useSpring = false) => {
|
||||
let itemIndex;
|
||||
switch (this.props.location.pathname) {
|
||||
case '/stats':
|
||||
itemIndex = 1;
|
||||
break;
|
||||
case '/about':
|
||||
itemIndex = 2;
|
||||
break;
|
||||
case '/':
|
||||
default:
|
||||
itemIndex = 0;
|
||||
}
|
||||
function AboutLogoImage(props) {
|
||||
return <img {...props} style={styles.logoImage} />;
|
||||
}
|
||||
|
||||
const itemNodes = this.listNode.querySelectorAll('li');
|
||||
const currentNode = itemNodes[itemIndex];
|
||||
function Stats({ data }) {
|
||||
const totals = data.totals;
|
||||
const since = parseDate(totals.since);
|
||||
const until = parseDate(totals.until);
|
||||
|
||||
this.setState({
|
||||
underlineLeft: currentNode.offsetLeft,
|
||||
underlineWidth: currentNode.offsetWidth,
|
||||
useSpring
|
||||
});
|
||||
};
|
||||
return (
|
||||
<p>
|
||||
From <strong>{formatDate(since, 'MMM D')}</strong> to{' '}
|
||||
<strong>{formatDate(until, 'MMM D')}</strong> unpkg served{' '}
|
||||
<strong>{formatNumber(totals.requests.all)}</strong> requests and a total
|
||||
of <strong>{formatBytes(totals.bandwidth.all)}</strong> of data to{' '}
|
||||
<strong>{formatNumber(totals.uniques.all)}</strong> unique visitors,{' '}
|
||||
<strong>
|
||||
{formatPercent(totals.requests.cached / totals.requests.all, 0)}%
|
||||
</strong>{' '}
|
||||
of which were served from the cache.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export default class App extends React.Component {
|
||||
state = { stats: null };
|
||||
|
||||
componentDidMount() {
|
||||
this.adjustUnderline();
|
||||
|
||||
fetch('/api/stats?period=last-month')
|
||||
.then(res => res.json())
|
||||
.then(stats => this.setState({ stats }));
|
||||
@ -93,83 +111,217 @@ class Layout extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.location.pathname !== this.props.location.pathname) {
|
||||
this.adjustUnderline(true);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { underlineLeft, underlineWidth, useSpring } = this.state;
|
||||
|
||||
const style = {
|
||||
left: useSpring
|
||||
? spring(underlineLeft, { stiffness: 220 })
|
||||
: underlineLeft,
|
||||
width: useSpring ? spring(underlineWidth) : underlineWidth
|
||||
};
|
||||
const { stats } = this.state;
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<WindowSize onChange={this.adjustUnderline} />
|
||||
<div className="wrapper">
|
||||
<header>
|
||||
<h1 style={styles.title}>unpkg</h1>
|
||||
|
||||
<div className="wrapper">
|
||||
<header>
|
||||
<h1 style={styles.title}>unpkg</h1>
|
||||
<nav style={styles.nav}>
|
||||
<ol style={styles.navList} ref={node => (this.listNode = node)}>
|
||||
<li style={styles.navListItem}>
|
||||
<Link to="/" style={styles.navLink}>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li style={styles.navListItem}>
|
||||
<Link to="/stats" style={styles.navLink}>
|
||||
Stats
|
||||
</Link>
|
||||
</li>
|
||||
<li style={styles.navListItem}>
|
||||
<Link to="/about" style={styles.navLink}>
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
<Motion
|
||||
defaultStyle={{ left: underlineLeft, width: underlineWidth }}
|
||||
style={style}
|
||||
children={style => (
|
||||
<div
|
||||
style={{
|
||||
...styles.navUnderline,
|
||||
WebkitTransform: `translate3d(${style.left}px,0,0)`,
|
||||
transform: `translate3d(${style.left}px,0,0)`,
|
||||
width: style.width
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</nav>
|
||||
</header>
|
||||
<p>
|
||||
unpkg is a fast, global{' '}
|
||||
<a href="https://en.wikipedia.org/wiki/Content_delivery_network">
|
||||
content delivery network
|
||||
</a>{' '}
|
||||
for everything on <a href="https://www.npmjs.com/">npm</a>. Use it
|
||||
to quickly and easily load any file from any package using a URL
|
||||
like:
|
||||
</p>
|
||||
|
||||
<div style={styles.example}>unpkg.com/:package@:version/:file</div>
|
||||
|
||||
{stats && <Stats data={stats} />}
|
||||
</header>
|
||||
|
||||
<h3>Examples</h3>
|
||||
|
||||
<p>Using a fixed version:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/react@16.7.0/umd/react.production.min.js">
|
||||
unpkg.com/react@16.7.0/umd/react.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/react-dom@16.7.0/umd/react-dom.production.min.js">
|
||||
unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
You may also use a{' '}
|
||||
<a href="https://docs.npmjs.com/misc/semver">semver range</a> or a{' '}
|
||||
<a href="https://docs.npmjs.com/cli/dist-tag">tag</a> instead of a
|
||||
fixed version number, or omit the version/tag entirely to use the{' '}
|
||||
<code>latest</code> tag.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/react@^16/umd/react.production.min.js">
|
||||
unpkg.com/react@^16/umd/react.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/react/umd/react.production.min.js">
|
||||
unpkg.com/react/umd/react.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
If you omit the file path (i.e. use a “bare” URL), unpkg
|
||||
will serve the file specified by the <code>unpkg</code> field in{' '}
|
||||
<code>package.json</code>, or fall back to
|
||||
<code>main</code>.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/d3">unpkg.com/d3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/jquery">unpkg.com/jquery</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/three">unpkg.com/three</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Append a <code>/</code> at the end of a URL to view a listing of all
|
||||
the files in a package.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/react/">unpkg.com/react/</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/lodash/">unpkg.com/lodash/</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="query-params">Query Parameters</h3>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<code>?meta</code>
|
||||
</dt>
|
||||
<dd>
|
||||
Return metadata about any file in a package as JSON (e.g.
|
||||
<code>/any/file?meta</code>)
|
||||
</dd>
|
||||
|
||||
<dt>
|
||||
<code>?module</code>
|
||||
</dt>
|
||||
<dd>
|
||||
Expands all{' '}
|
||||
<a href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier">
|
||||
“bare” <code>import</code> specifiers
|
||||
</a>{' '}
|
||||
in JavaScript modules to unpkg URLs. This feature is{' '}
|
||||
<em>very experimental</em>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 id="cache-behavior">Cache Behavior</h3>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
URLs that do not specify a package version number redirect to one that
|
||||
does. This is the <code>latest</code> version when no version is
|
||||
specified, or the <code>maxSatisfying</code> version when a{' '}
|
||||
<a href="https://github.com/npm/node-semver">semver version</a> is
|
||||
given. Redirects are cached for 5 minutes.
|
||||
</p>
|
||||
<p>
|
||||
Browsers are instructed (via the <code>Cache-Control</code> header) to
|
||||
cache assets for 1 year.
|
||||
</p>
|
||||
|
||||
<h3 id="about">About</h3>
|
||||
|
||||
<p>
|
||||
unpkg is an <a href="https://github.com/unpkg">open source</a> project
|
||||
built and maintained by{' '}
|
||||
<a href="https://twitter.com/mjackson">Michael Jackson</a>. unpkg is
|
||||
not affiliated with or supported by npm, Inc. in any way. Please do
|
||||
not contact npm for help with unpkg. Instead, please reach out to{' '}
|
||||
<a href="https://twitter.com/unpkg">@unpkg</a> with any questions or
|
||||
concerns.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The fast, global infrastructure that powers unpkg is generously
|
||||
donated by <a href="https://www.cloudflare.com">Cloudflare</a> and{' '}
|
||||
<a href="https://www.heroku.com">Heroku</a>.
|
||||
</p>
|
||||
|
||||
<div style={styles.logoList}>
|
||||
<AboutLogo>
|
||||
<a href="https://www.cloudflare.com">
|
||||
<AboutLogoImage src={cloudflareLogo} />
|
||||
</a>
|
||||
</AboutLogo>
|
||||
<AboutLogo>
|
||||
<a href="https://www.heroku.com">
|
||||
<AboutLogoImage src={herokuLogo} />
|
||||
</a>
|
||||
</AboutLogo>
|
||||
</div>
|
||||
|
||||
<Switch>
|
||||
<Route
|
||||
path="/stats"
|
||||
render={() => <Stats data={this.state.stats} />}
|
||||
/>
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/" component={Home} />
|
||||
</Switch>
|
||||
<h3 id="workflow">Workflow</h3>
|
||||
|
||||
<p>
|
||||
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 <a href="https://github.com/umdjs/umd">UMD</a> build in
|
||||
your npm package (not your repo, that's different!).
|
||||
</p>
|
||||
|
||||
<p>You can do this easily using the following setup:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Add the <code>umd</code> (or <code>dist</code>) directory to your{' '}
|
||||
<code>.gitignore</code> file
|
||||
</li>
|
||||
<li>
|
||||
Add the <code>umd</code> directory to your{' '}
|
||||
<a href="https://docs.npmjs.com/files/package.json#files">
|
||||
files array
|
||||
</a>{' '}
|
||||
in
|
||||
<code>package.json</code>
|
||||
</li>
|
||||
<li>
|
||||
Use a build script to generate your UMD build in the{' '}
|
||||
<code>umd</code> directory when you publish
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
That's it! Now when you <code>npm publish</code> you'll have
|
||||
a version available on unpkg as well.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Layout.propTypes = {
|
||||
App.propTypes = {
|
||||
location: PropTypes.object,
|
||||
children: PropTypes.node
|
||||
};
|
||||
}
|
||||
|
||||
export default withRouter(Layout);
|
||||
|
||||
Reference in New Issue
Block a user