Add Google Cloud logo + sponsorship info
- Also fixed some horizontal scrolling issues
This commit is contained in:
Michael Jackson
parent
ebe058b092
commit
7215072c72
|
|
@ -33,6 +33,7 @@ const globalStyles = css`
|
|||
${fontSans}
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: break-word;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -119,13 +120,22 @@ const lightCodeStyles = css`
|
|||
}
|
||||
`;
|
||||
|
||||
const linkStyle = {
|
||||
color: '#0076ff',
|
||||
textDecoration: 'none',
|
||||
':hover': {
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
};
|
||||
function Link({ css, ...rest }) {
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
||||
<a
|
||||
{...rest}
|
||||
css={{
|
||||
color: '#0076ff',
|
||||
textDecoration: 'none',
|
||||
':hover': {
|
||||
textDecoration: 'underline'
|
||||
},
|
||||
...css
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App({
|
||||
packageName,
|
||||
|
|
@ -148,11 +158,7 @@ export default function App({
|
|||
} else {
|
||||
let url = `/browse/${packageName}@${packageVersion}`;
|
||||
|
||||
breadcrumbs.push(
|
||||
<a href={`${url}/`} css={linkStyle}>
|
||||
{packageName}
|
||||
</a>
|
||||
);
|
||||
breadcrumbs.push(<Link href={`${url}/`}>{packageName}</Link>);
|
||||
|
||||
const segments = filename
|
||||
.replace(/^\/+/, '')
|
||||
|
|
@ -163,11 +169,7 @@ export default function App({
|
|||
|
||||
segments.forEach(segment => {
|
||||
url += `/${segment}`;
|
||||
breadcrumbs.push(
|
||||
<a href={`${url}/`} css={linkStyle}>
|
||||
{segment}
|
||||
</a>
|
||||
);
|
||||
breadcrumbs.push(<Link href={`${url}/`}>{segment}</Link>);
|
||||
});
|
||||
|
||||
breadcrumbs.push(lastSegment);
|
||||
|
|
@ -177,182 +179,195 @@ export default function App({
|
|||
const maxContentWidth = 940;
|
||||
|
||||
return (
|
||||
<PackageInfoProvider
|
||||
packageName={packageName}
|
||||
packageVersion={packageVersion}
|
||||
>
|
||||
<Fragment>
|
||||
<Global styles={globalStyles} />
|
||||
<Global styles={lightCodeStyles} />
|
||||
<Fragment>
|
||||
<Global styles={globalStyles} />
|
||||
<Global styles={lightCodeStyles} />
|
||||
|
||||
<div css={{ flex: '1 0 auto' }}>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '0 20px',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<header css={{ textAlign: 'center' }}>
|
||||
<h1 css={{ fontSize: '3rem', marginTop: '2rem' }}>
|
||||
<a href="/" css={{ color: '#000', textDecoration: 'none' }}>
|
||||
UNPKG
|
||||
</a>
|
||||
</h1>
|
||||
{/*
|
||||
<div css={{ flex: '1 0 auto' }}>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '0 20px',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<header css={{ marginTop: '2rem' }}>
|
||||
<h1
|
||||
css={{
|
||||
textAlign: 'center',
|
||||
fontSize: '3rem',
|
||||
letterSpacing: '0.05em'
|
||||
}}
|
||||
>
|
||||
<a href="/" css={{ color: '#000', textDecoration: 'none' }}>
|
||||
UNPKG
|
||||
</a>
|
||||
</h1>
|
||||
{/*
|
||||
<nav>
|
||||
<a href="#" css={{ ...linkStyle, color: '#c400ff' }}>
|
||||
<Link href="#" css={{ color: '#c400ff' }}>
|
||||
Become a Sponsor
|
||||
</a>
|
||||
</Link>
|
||||
</nav>
|
||||
*/}
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<header
|
||||
<header
|
||||
css={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
'@media (max-width: 700px)': {
|
||||
flexDirection: 'column-reverse',
|
||||
alignItems: 'flex-start'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
css={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'normal',
|
||||
flex: 1,
|
||||
wordBreak: 'break-all'
|
||||
}}
|
||||
>
|
||||
<nav>
|
||||
{breadcrumbs.map((item, index, array) => (
|
||||
<Fragment key={index}>
|
||||
{index !== 0 && (
|
||||
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
||||
)}
|
||||
{index === array.length - 1 ? (
|
||||
<strong>{item}</strong>
|
||||
) : (
|
||||
item
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</h1>
|
||||
<p
|
||||
css={{
|
||||
marginLeft: 20,
|
||||
'@media (max-width: 700px)': {
|
||||
flexDirection: 'column-reverse',
|
||||
alignItems: 'flex-start'
|
||||
marginLeft: 0,
|
||||
marginBottom: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h1 css={{ fontSize: '1.5rem', fontWeight: 'normal', flex: 1 }}>
|
||||
<nav>
|
||||
{breadcrumbs.map((item, index, array) => (
|
||||
<span key={index}>
|
||||
{index !== 0 && (
|
||||
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
||||
)}
|
||||
{index === array.length - 1 ? (
|
||||
<strong>{item}</strong>
|
||||
) : (
|
||||
item
|
||||
)}
|
||||
</span>
|
||||
<label>
|
||||
Version:{' '}
|
||||
<select
|
||||
name="version"
|
||||
defaultValue={packageVersion}
|
||||
onChange={handleChange}
|
||||
css={{
|
||||
appearance: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 24px 4px 8px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.9em',
|
||||
color: '#24292e',
|
||||
border: '1px solid rgba(27,31,35,.2)',
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#eff3f6',
|
||||
backgroundImage: `url(${SelectDownArrow})`,
|
||||
backgroundPosition: 'right 8px center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'auto 25%',
|
||||
':hover': {
|
||||
backgroundColor: '#e6ebf1',
|
||||
borderColor: 'rgba(27,31,35,.35)'
|
||||
},
|
||||
':active': {
|
||||
backgroundColor: '#e9ecef',
|
||||
borderColor: 'rgba(27,31,35,.35)',
|
||||
boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{availableVersions.map(v => (
|
||||
<option key={v} value={v}>
|
||||
{v}
|
||||
</option>
|
||||
))}
|
||||
</nav>
|
||||
</h1>
|
||||
<p
|
||||
css={{
|
||||
marginLeft: 20,
|
||||
'@media (max-width: 700px)': {
|
||||
marginLeft: 0,
|
||||
marginBottom: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Version:{' '}
|
||||
<select
|
||||
name="version"
|
||||
defaultValue={packageVersion}
|
||||
onChange={handleChange}
|
||||
css={{
|
||||
appearance: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 24px 4px 8px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.9em',
|
||||
color: '#24292e',
|
||||
border: '1px solid rgba(27,31,35,.2)',
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#eff3f6',
|
||||
backgroundImage: `url(${SelectDownArrow})`,
|
||||
backgroundPosition: 'right 8px center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'auto 25%',
|
||||
':hover': {
|
||||
backgroundColor: '#e6ebf1',
|
||||
borderColor: 'rgba(27,31,35,.35)'
|
||||
},
|
||||
':active': {
|
||||
backgroundColor: '#e9ecef',
|
||||
borderColor: 'rgba(27,31,35,.35)',
|
||||
boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{availableVersions.map(v => (
|
||||
<option key={v} value={v}>
|
||||
{v}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div
|
||||
css={{
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '0 20px',
|
||||
margin: '0 auto',
|
||||
'@media (max-width: 700px)': {
|
||||
padding: 0,
|
||||
margin: 0
|
||||
}
|
||||
}}
|
||||
<div
|
||||
css={{
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '0 20px',
|
||||
margin: '0 auto',
|
||||
'@media (max-width: 700px)': {
|
||||
padding: 0,
|
||||
margin: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<PackageInfoProvider
|
||||
packageName={packageName}
|
||||
packageVersion={packageVersion}
|
||||
>
|
||||
{target.type === 'directory' ? (
|
||||
<DirectoryViewer path={target.path} details={target.details} />
|
||||
) : target.type === 'file' ? (
|
||||
<FileViewer path={target.path} details={target.details} />
|
||||
) : null}
|
||||
</div>
|
||||
</PackageInfoProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer
|
||||
<footer
|
||||
css={{
|
||||
marginTop: '5rem',
|
||||
background: 'black',
|
||||
color: '#aaa'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{
|
||||
marginTop: '5rem',
|
||||
background: 'black',
|
||||
color: '#aaa'
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '10px 20px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: maxContentWidth,
|
||||
padding: '10px 20px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<p>© {new Date().getFullYear()} UNPKG</p>
|
||||
<p css={{ fontSize: '1.5rem' }}>
|
||||
<a
|
||||
title="Twitter"
|
||||
href="https://twitter.com/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
display: 'inline-block',
|
||||
':hover': { color: 'white' }
|
||||
}}
|
||||
>
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a
|
||||
title="GitHub"
|
||||
href="https://github.com/mjackson/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
display: 'inline-block',
|
||||
marginLeft: '1rem',
|
||||
':hover': { color: 'white' }
|
||||
}}
|
||||
>
|
||||
<GitHubIcon />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</Fragment>
|
||||
</PackageInfoProvider>
|
||||
<p>© {new Date().getFullYear()} UNPKG</p>
|
||||
<p css={{ fontSize: '1.5rem' }}>
|
||||
<a
|
||||
title="Twitter"
|
||||
href="https://twitter.com/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
display: 'inline-block',
|
||||
':hover': { color: 'white' }
|
||||
}}
|
||||
>
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a
|
||||
title="GitHub"
|
||||
href="https://github.com/mjackson/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
display: 'inline-block',
|
||||
marginLeft: '1rem',
|
||||
':hover': { color: 'white' }
|
||||
}}
|
||||
>
|
||||
<GitHubIcon />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { fontSans, fontMono } from '../utils/style.js';
|
|||
|
||||
import { TwitterIcon, GitHubIcon } from './Icons.js';
|
||||
import CloudflareLogo from './images/CloudflareLogo.png';
|
||||
import AngularLogo from './images/AngularLogo.png';
|
||||
import GoogleCloudLogo from './images/GoogleCloudLogo.png';
|
||||
|
||||
const globalStyles = css`
|
||||
html {
|
||||
|
|
@ -34,6 +34,7 @@ const globalStyles = css`
|
|||
${fontSans}
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: break-word;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -47,27 +48,30 @@ const globalStyles = css`
|
|||
margin-left: 0;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const linkStyle = {
|
||||
color: '#0076ff',
|
||||
textDecoration: 'none',
|
||||
':hover': {
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
};
|
||||
function Link(props) {
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
||||
<a
|
||||
{...props}
|
||||
css={{
|
||||
color: '#0076ff',
|
||||
textDecoration: 'none',
|
||||
':hover': {
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AboutLogo({ children }) {
|
||||
return <div css={{ textAlign: 'center', flex: '1' }}>{children}</div>;
|
||||
}
|
||||
|
||||
function AboutLogoImage(props) {
|
||||
/* eslint-disable-next-line jsx-a11y/alt-text */
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
return <img {...props} css={{ maxWidth: '90%' }} />;
|
||||
}
|
||||
|
||||
|
|
@ -114,373 +118,276 @@ export default function App() {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: 740,
|
||||
margin: '0 auto',
|
||||
padding: '0 20px'
|
||||
}}
|
||||
>
|
||||
<Global styles={globalStyles} />
|
||||
<Global styles={globalStyles} />
|
||||
|
||||
<header>
|
||||
<h1
|
||||
css={{
|
||||
textTransform: 'uppercase',
|
||||
textAlign: 'center',
|
||||
fontSize: '5em'
|
||||
}}
|
||||
>
|
||||
unpkg
|
||||
</h1>
|
||||
<div css={{ maxWidth: 740, margin: '0 auto' }}>
|
||||
<div css={{ padding: '0 20px' }}>
|
||||
<header>
|
||||
<h1
|
||||
css={{
|
||||
textAlign: 'center',
|
||||
fontSize: '4.5em',
|
||||
letterSpacing: '0.05em'
|
||||
}}
|
||||
>
|
||||
UNPKG
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
unpkg is a fast, global content delivery network for everything on{' '}
|
||||
<Link href="https://www.npmjs.com/">npm</Link>. Use it to quickly
|
||||
and easily load any file from any package using a URL like:
|
||||
</p>
|
||||
|
||||
<div
|
||||
css={{
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#eee',
|
||||
margin: '2em 0',
|
||||
padding: '5px 0'
|
||||
}}
|
||||
>
|
||||
unpkg.com/:package@:version/:file
|
||||
</div>
|
||||
|
||||
{hasStats && <Stats data={stats} />}
|
||||
</header>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} id="examples">
|
||||
Examples
|
||||
</h3>
|
||||
|
||||
<p>Using a fixed version:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/react@16.7.0/umd/react.production.min.js">
|
||||
unpkg.com/react@16.7.0/umd/react.production.min.js
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link 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
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
unpkg is a fast, global content delivery network for everything on{' '}
|
||||
<a href="https://www.npmjs.com/" css={linkStyle}>
|
||||
npm
|
||||
</a>
|
||||
. Use it to quickly and easily load any file from any package using
|
||||
a URL like:
|
||||
You may also use a{' '}
|
||||
<Link href="https://docs.npmjs.com/misc/semver">semver range</Link>{' '}
|
||||
or a <Link href="https://docs.npmjs.com/cli/dist-tag">tag</Link>{' '}
|
||||
instead of a fixed version number, or omit the version/tag entirely
|
||||
to use the <code>latest</code> tag.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/react@^16/umd/react.production.min.js">
|
||||
unpkg.com/react@^16/umd/react.production.min.js
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/react/umd/react.production.min.js">
|
||||
unpkg.com/react/umd/react.production.min.js
|
||||
</Link>
|
||||
</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>
|
||||
<Link href="/jquery">unpkg.com/jquery</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/three">unpkg.com/three</Link>
|
||||
</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>
|
||||
<Link href="/react/">unpkg.com/react/</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/react-router/">unpkg.com/react-router/</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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{' '}
|
||||
<Link href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier">
|
||||
“bare” <code>import</code> specifiers
|
||||
</Link>{' '}
|
||||
in JavaScript modules to unpkg URLs. This feature is{' '}
|
||||
<em>very experimental</em>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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>
|
||||
Browsers are instructed (via the <code>Cache-Control</code> header)
|
||||
to cache assets indefinitely (1 year).
|
||||
</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{' '}
|
||||
<Link href="https://github.com/npm/node-semver">
|
||||
semver version
|
||||
</Link>{' '}
|
||||
is given. Redirects are cached for 10 minutes at the CDN, 1 minute
|
||||
in browsers.
|
||||
</p>
|
||||
<p>
|
||||
If you want users to be able to use the latest version when you cut
|
||||
a new release, the best policy is to put the version number in the
|
||||
URL directly in your installation instructions. This will also load
|
||||
more quickly because we won't have to resolve the latest
|
||||
version and redirect them.
|
||||
</p>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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{' '}
|
||||
<Link href="https://github.com/umdjs/umd">UMD</Link> 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{' '}
|
||||
<Link href="https://docs.npmjs.com/files/package.json#files">
|
||||
files array
|
||||
</Link>{' '}
|
||||
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>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} id="about">
|
||||
About
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
unpkg is an{' '}
|
||||
<Link href="https://github.com/mjackson/unpkg">open source</Link>{' '}
|
||||
project built and maintained by{' '}
|
||||
<Link href="https://twitter.com/mjackson">Michael Jackson</Link>.
|
||||
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 <Link href="https://twitter.com/unpkg">@unpkg</Link> with any
|
||||
questions or concerns.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The unpkg CDN is powered by{' '}
|
||||
<Link href="https://www.cloudflare.com">Cloudflare</Link>, one of
|
||||
the world's largest and fastest cloud network platforms.{' '}
|
||||
{hasStats && (
|
||||
<span>
|
||||
In the past month, Cloudflare served over{' '}
|
||||
<strong>{formatBytes(stats.totals.bandwidth.all)}</strong> to{' '}
|
||||
<strong>{formatNumber(stats.totals.uniques.all)}</strong> unique
|
||||
unpkg users all over the world.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div
|
||||
css={{
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#eee',
|
||||
margin: '2em 0',
|
||||
padding: '5px 0'
|
||||
margin: '4em 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
unpkg.com/:package@:version/:file
|
||||
<AboutLogo>
|
||||
<a href="https://www.cloudflare.com">
|
||||
<AboutLogoImage
|
||||
alt="Cloudflare"
|
||||
src={CloudflareLogo}
|
||||
height="100"
|
||||
/>
|
||||
</a>
|
||||
</AboutLogo>
|
||||
</div>
|
||||
|
||||
{hasStats && <Stats data={stats} />}
|
||||
</header>
|
||||
<p>
|
||||
The origin infrastructure runs on{' '}
|
||||
<Link href="https://cloud.google.com/">Google Cloud</Link> which
|
||||
automatically scales the number of available servers to meet the
|
||||
current demand.
|
||||
</p>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} id="examples">
|
||||
Examples
|
||||
</h3>
|
||||
|
||||
<p>Using a fixed version:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
title="react.production.min.js"
|
||||
href="/react@16.7.0/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react@16.7.0/umd/react.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="react-dom.production.min.js"
|
||||
href="/react-dom@16.7.0/umd/react-dom.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
You may also use a{' '}
|
||||
<a
|
||||
title="semver"
|
||||
href="https://docs.npmjs.com/misc/semver"
|
||||
css={linkStyle}
|
||||
<div
|
||||
css={{
|
||||
margin: '4em 0 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
semver range
|
||||
</a>{' '}
|
||||
or a{' '}
|
||||
<a
|
||||
title="tags"
|
||||
href="https://docs.npmjs.com/cli/dist-tag"
|
||||
css={linkStyle}
|
||||
>
|
||||
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
|
||||
title="react.production.min.js"
|
||||
href="/react@^16/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react@^16/umd/react.production.min.js
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="react.production.min.js"
|
||||
href="/react/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
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 title="jQuery" href="/jquery" css={linkStyle}>
|
||||
unpkg.com/jquery
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Three.js" href="/three" css={linkStyle}>
|
||||
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
|
||||
title="Index of the react package"
|
||||
href="/react/"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react/
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="Index of the react-router package"
|
||||
href="/react-router/"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react-router/
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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
|
||||
title="bare import specifiers"
|
||||
href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier"
|
||||
css={linkStyle}
|
||||
>
|
||||
“bare” <code>import</code> specifiers
|
||||
</a>{' '}
|
||||
in JavaScript modules to unpkg URLs. This feature is{' '}
|
||||
<em>very experimental</em>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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>
|
||||
Browsers are instructed (via the <code>Cache-Control</code> header) to
|
||||
cache assets indefinitely (1 year).
|
||||
</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
|
||||
title="semver"
|
||||
href="https://github.com/npm/node-semver"
|
||||
css={linkStyle}
|
||||
>
|
||||
semver version
|
||||
</a>{' '}
|
||||
is given. Redirects are cached for 10 minutes at the CDN, 1 minute in
|
||||
browsers.
|
||||
</p>
|
||||
<p>
|
||||
If you want users to be able to use the latest version when you cut a
|
||||
new release, the best policy is to put the version number in the URL
|
||||
directly in your installation instructions. This will also load more
|
||||
quickly because we won't have to resolve the latest version and
|
||||
redirect them.
|
||||
</p>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} 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 title="UMD" href="https://github.com/umdjs/umd" css={linkStyle}>
|
||||
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
|
||||
title="package.json files array"
|
||||
href="https://docs.npmjs.com/files/package.json#files"
|
||||
css={linkStyle}
|
||||
>
|
||||
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>
|
||||
|
||||
<h3 css={{ fontSize: '1.6em' }} id="about">
|
||||
About
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
unpkg is an{' '}
|
||||
<a
|
||||
title="unpkg on GitHub"
|
||||
href="https://github.com/mjackson/unpkg"
|
||||
css={linkStyle}
|
||||
>
|
||||
open source
|
||||
</a>{' '}
|
||||
project built and maintained by{' '}
|
||||
<a
|
||||
title="mjackson on Twitter"
|
||||
href="https://twitter.com/mjackson"
|
||||
css={linkStyle}
|
||||
>
|
||||
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
|
||||
title="unpkg on Twitter"
|
||||
href="https://twitter.com/unpkg"
|
||||
css={linkStyle}
|
||||
>
|
||||
@unpkg
|
||||
</a>{' '}
|
||||
with any questions or concerns.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The unpkg CDN is powered by{' '}
|
||||
<a
|
||||
title="Cloudflare"
|
||||
href="https://www.cloudflare.com"
|
||||
css={linkStyle}
|
||||
>
|
||||
Cloudflare
|
||||
</a>
|
||||
, one of the world's largest and fastest cloud network platforms.{' '}
|
||||
{hasStats && (
|
||||
<span>
|
||||
In the past month, Cloudflare served over{' '}
|
||||
<strong>{formatBytes(stats.totals.bandwidth.all)}</strong> to{' '}
|
||||
<strong>{formatNumber(stats.totals.uniques.all)}</strong> unique
|
||||
unpkg users all over the world.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div
|
||||
css={{
|
||||
margin: '4em 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<AboutLogo>
|
||||
<a title="Cloudflare" href="https://www.cloudflare.com">
|
||||
<AboutLogoImage
|
||||
alt="Cloudflare"
|
||||
src={CloudflareLogo}
|
||||
height="100"
|
||||
/>
|
||||
</a>
|
||||
</AboutLogo>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
The origin servers for unpkg are powered by{' '}
|
||||
<a
|
||||
title="Google Cloud"
|
||||
href="https://cloud.google.com/"
|
||||
css={linkStyle}
|
||||
>
|
||||
Google Cloud
|
||||
</a>{' '}
|
||||
and made possible by a generous donation from the{' '}
|
||||
<a title="Angular" href="https://angular.io" css={linkStyle}>
|
||||
Angular web framework
|
||||
</a>
|
||||
, one of the world's most popular libraries for building
|
||||
incredible user experiences on both desktop and mobile.
|
||||
</p>
|
||||
|
||||
<div
|
||||
css={{
|
||||
margin: '4em 0 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<AboutLogo>
|
||||
<a title="Angular" href="https://angular.io">
|
||||
<AboutLogoImage alt="Angular" src={AngularLogo} width="200" />
|
||||
</a>
|
||||
</AboutLogo>
|
||||
<AboutLogo>
|
||||
<a href="https://cloud.google.com">
|
||||
<AboutLogoImage
|
||||
alt="Google Cloud"
|
||||
src={GoogleCloudLogo}
|
||||
width="320"
|
||||
/>
|
||||
</a>
|
||||
</AboutLogo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -505,7 +412,6 @@ export default function App() {
|
|||
<p>© {new Date().getFullYear()} UNPKG</p>
|
||||
<p css={{ fontSize: '1.5rem' }}>
|
||||
<a
|
||||
title="Twitter"
|
||||
href="https://twitter.com/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
|
|
@ -516,7 +422,6 @@ export default function App() {
|
|||
<TwitterIcon />
|
||||
</a>
|
||||
<a
|
||||
title="GitHub"
|
||||
href="https://github.com/mjackson/unpkg"
|
||||
css={{
|
||||
color: '#aaa',
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Loading…
Reference in New Issue