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}
|
${fontSans}
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
overflow-wrap: break-word;
|
||||||
background: white;
|
background: white;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
@ -119,13 +120,22 @@ const lightCodeStyles = css`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const linkStyle = {
|
function Link({ css, ...rest }) {
|
||||||
color: '#0076ff',
|
return (
|
||||||
textDecoration: 'none',
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
||||||
':hover': {
|
<a
|
||||||
textDecoration: 'underline'
|
{...rest}
|
||||||
}
|
css={{
|
||||||
};
|
color: '#0076ff',
|
||||||
|
textDecoration: 'none',
|
||||||
|
':hover': {
|
||||||
|
textDecoration: 'underline'
|
||||||
|
},
|
||||||
|
...css
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function App({
|
export default function App({
|
||||||
packageName,
|
packageName,
|
||||||
|
|
@ -148,11 +158,7 @@ export default function App({
|
||||||
} else {
|
} else {
|
||||||
let url = `/browse/${packageName}@${packageVersion}`;
|
let url = `/browse/${packageName}@${packageVersion}`;
|
||||||
|
|
||||||
breadcrumbs.push(
|
breadcrumbs.push(<Link href={`${url}/`}>{packageName}</Link>);
|
||||||
<a href={`${url}/`} css={linkStyle}>
|
|
||||||
{packageName}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
|
|
||||||
const segments = filename
|
const segments = filename
|
||||||
.replace(/^\/+/, '')
|
.replace(/^\/+/, '')
|
||||||
|
|
@ -163,11 +169,7 @@ export default function App({
|
||||||
|
|
||||||
segments.forEach(segment => {
|
segments.forEach(segment => {
|
||||||
url += `/${segment}`;
|
url += `/${segment}`;
|
||||||
breadcrumbs.push(
|
breadcrumbs.push(<Link href={`${url}/`}>{segment}</Link>);
|
||||||
<a href={`${url}/`} css={linkStyle}>
|
|
||||||
{segment}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
breadcrumbs.push(lastSegment);
|
breadcrumbs.push(lastSegment);
|
||||||
|
|
@ -177,182 +179,195 @@ export default function App({
|
||||||
const maxContentWidth = 940;
|
const maxContentWidth = 940;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PackageInfoProvider
|
<Fragment>
|
||||||
packageName={packageName}
|
<Global styles={globalStyles} />
|
||||||
packageVersion={packageVersion}
|
<Global styles={lightCodeStyles} />
|
||||||
>
|
|
||||||
<Fragment>
|
|
||||||
<Global styles={globalStyles} />
|
|
||||||
<Global styles={lightCodeStyles} />
|
|
||||||
|
|
||||||
<div css={{ flex: '1 0 auto' }}>
|
<div css={{ flex: '1 0 auto' }}>
|
||||||
<div
|
<div
|
||||||
css={{
|
css={{
|
||||||
maxWidth: maxContentWidth,
|
maxWidth: maxContentWidth,
|
||||||
padding: '0 20px',
|
padding: '0 20px',
|
||||||
margin: '0 auto'
|
margin: '0 auto'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<header css={{ textAlign: 'center' }}>
|
<header css={{ marginTop: '2rem' }}>
|
||||||
<h1 css={{ fontSize: '3rem', marginTop: '2rem' }}>
|
<h1
|
||||||
<a href="/" css={{ color: '#000', textDecoration: 'none' }}>
|
css={{
|
||||||
UNPKG
|
textAlign: 'center',
|
||||||
</a>
|
fontSize: '3rem',
|
||||||
</h1>
|
letterSpacing: '0.05em'
|
||||||
{/*
|
}}
|
||||||
|
>
|
||||||
|
<a href="/" css={{ color: '#000', textDecoration: 'none' }}>
|
||||||
|
UNPKG
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
{/*
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#" css={{ ...linkStyle, color: '#c400ff' }}>
|
<Link href="#" css={{ color: '#c400ff' }}>
|
||||||
Become a Sponsor
|
Become a Sponsor
|
||||||
</a>
|
</Link>
|
||||||
</nav>
|
</nav>
|
||||||
*/}
|
*/}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<header
|
<header
|
||||||
|
css={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
'@media (max-width: 700px)': {
|
||||||
|
flexDirection: 'column-reverse',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1
|
||||||
css={{
|
css={{
|
||||||
display: 'flex',
|
fontSize: '1.5rem',
|
||||||
flexDirection: 'row',
|
fontWeight: 'normal',
|
||||||
alignItems: 'center',
|
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)': {
|
'@media (max-width: 700px)': {
|
||||||
flexDirection: 'column-reverse',
|
marginLeft: 0,
|
||||||
alignItems: 'flex-start'
|
marginBottom: 0
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h1 css={{ fontSize: '1.5rem', fontWeight: 'normal', flex: 1 }}>
|
<label>
|
||||||
<nav>
|
Version:{' '}
|
||||||
{breadcrumbs.map((item, index, array) => (
|
<select
|
||||||
<span key={index}>
|
name="version"
|
||||||
{index !== 0 && (
|
defaultValue={packageVersion}
|
||||||
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
onChange={handleChange}
|
||||||
)}
|
css={{
|
||||||
{index === array.length - 1 ? (
|
appearance: 'none',
|
||||||
<strong>{item}</strong>
|
cursor: 'pointer',
|
||||||
) : (
|
padding: '4px 24px 4px 8px',
|
||||||
item
|
fontWeight: 600,
|
||||||
)}
|
fontSize: '0.9em',
|
||||||
</span>
|
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>
|
</select>
|
||||||
</h1>
|
</label>
|
||||||
<p
|
</p>
|
||||||
css={{
|
</header>
|
||||||
marginLeft: 20,
|
</div>
|
||||||
'@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>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
css={{
|
css={{
|
||||||
maxWidth: maxContentWidth,
|
maxWidth: maxContentWidth,
|
||||||
padding: '0 20px',
|
padding: '0 20px',
|
||||||
margin: '0 auto',
|
margin: '0 auto',
|
||||||
'@media (max-width: 700px)': {
|
'@media (max-width: 700px)': {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
margin: 0
|
margin: 0
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<PackageInfoProvider
|
||||||
|
packageName={packageName}
|
||||||
|
packageVersion={packageVersion}
|
||||||
>
|
>
|
||||||
{target.type === 'directory' ? (
|
{target.type === 'directory' ? (
|
||||||
<DirectoryViewer path={target.path} details={target.details} />
|
<DirectoryViewer path={target.path} details={target.details} />
|
||||||
) : target.type === 'file' ? (
|
) : target.type === 'file' ? (
|
||||||
<FileViewer path={target.path} details={target.details} />
|
<FileViewer path={target.path} details={target.details} />
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</PackageInfoProvider>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer
|
<footer
|
||||||
|
css={{
|
||||||
|
marginTop: '5rem',
|
||||||
|
background: 'black',
|
||||||
|
color: '#aaa'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
css={{
|
css={{
|
||||||
marginTop: '5rem',
|
maxWidth: maxContentWidth,
|
||||||
background: 'black',
|
padding: '10px 20px',
|
||||||
color: '#aaa'
|
margin: '0 auto',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<p>© {new Date().getFullYear()} UNPKG</p>
|
||||||
css={{
|
<p css={{ fontSize: '1.5rem' }}>
|
||||||
maxWidth: maxContentWidth,
|
<a
|
||||||
padding: '10px 20px',
|
title="Twitter"
|
||||||
margin: '0 auto',
|
href="https://twitter.com/unpkg"
|
||||||
display: 'flex',
|
css={{
|
||||||
flexDirection: 'row',
|
color: '#aaa',
|
||||||
alignItems: 'center',
|
display: 'inline-block',
|
||||||
justifyContent: 'space-between'
|
':hover': { color: 'white' }
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p>© {new Date().getFullYear()} UNPKG</p>
|
<TwitterIcon />
|
||||||
<p css={{ fontSize: '1.5rem' }}>
|
</a>
|
||||||
<a
|
<a
|
||||||
title="Twitter"
|
title="GitHub"
|
||||||
href="https://twitter.com/unpkg"
|
href="https://github.com/mjackson/unpkg"
|
||||||
css={{
|
css={{
|
||||||
color: '#aaa',
|
color: '#aaa',
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
':hover': { color: 'white' }
|
marginLeft: '1rem',
|
||||||
}}
|
':hover': { color: 'white' }
|
||||||
>
|
}}
|
||||||
<TwitterIcon />
|
>
|
||||||
</a>
|
<GitHubIcon />
|
||||||
<a
|
</a>
|
||||||
title="GitHub"
|
</p>
|
||||||
href="https://github.com/mjackson/unpkg"
|
</div>
|
||||||
css={{
|
</footer>
|
||||||
color: '#aaa',
|
</Fragment>
|
||||||
display: 'inline-block',
|
|
||||||
marginLeft: '1rem',
|
|
||||||
':hover': { color: 'white' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<GitHubIcon />
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</Fragment>
|
|
||||||
</PackageInfoProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { fontSans, fontMono } from '../utils/style.js';
|
||||||
|
|
||||||
import { TwitterIcon, GitHubIcon } from './Icons.js';
|
import { TwitterIcon, GitHubIcon } from './Icons.js';
|
||||||
import CloudflareLogo from './images/CloudflareLogo.png';
|
import CloudflareLogo from './images/CloudflareLogo.png';
|
||||||
import AngularLogo from './images/AngularLogo.png';
|
import GoogleCloudLogo from './images/GoogleCloudLogo.png';
|
||||||
|
|
||||||
const globalStyles = css`
|
const globalStyles = css`
|
||||||
html {
|
html {
|
||||||
|
|
@ -34,6 +34,7 @@ const globalStyles = css`
|
||||||
${fontSans}
|
${fontSans}
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
overflow-wrap: break-word;
|
||||||
background: white;
|
background: white;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
@ -47,27 +48,30 @@ const globalStyles = css`
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const linkStyle = {
|
function Link(props) {
|
||||||
color: '#0076ff',
|
return (
|
||||||
textDecoration: 'none',
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
||||||
':hover': {
|
<a
|
||||||
textDecoration: 'underline'
|
{...props}
|
||||||
}
|
css={{
|
||||||
};
|
color: '#0076ff',
|
||||||
|
textDecoration: 'none',
|
||||||
|
':hover': {
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function AboutLogo({ children }) {
|
function AboutLogo({ children }) {
|
||||||
return <div css={{ textAlign: 'center', flex: '1' }}>{children}</div>;
|
return <div css={{ textAlign: 'center', flex: '1' }}>{children}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
function AboutLogoImage(props) {
|
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%' }} />;
|
return <img {...props} css={{ maxWidth: '90%' }} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -114,373 +118,276 @@ export default function App() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div
|
<Global styles={globalStyles} />
|
||||||
css={{
|
|
||||||
maxWidth: 740,
|
|
||||||
margin: '0 auto',
|
|
||||||
padding: '0 20px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Global styles={globalStyles} />
|
|
||||||
|
|
||||||
<header>
|
<div css={{ maxWidth: 740, margin: '0 auto' }}>
|
||||||
<h1
|
<div css={{ padding: '0 20px' }}>
|
||||||
css={{
|
<header>
|
||||||
textTransform: 'uppercase',
|
<h1
|
||||||
textAlign: 'center',
|
css={{
|
||||||
fontSize: '5em'
|
textAlign: 'center',
|
||||||
}}
|
fontSize: '4.5em',
|
||||||
>
|
letterSpacing: '0.05em'
|
||||||
unpkg
|
}}
|
||||||
</h1>
|
>
|
||||||
|
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>
|
<p>
|
||||||
unpkg is a fast, global content delivery network for everything on{' '}
|
You may also use a{' '}
|
||||||
<a href="https://www.npmjs.com/" css={linkStyle}>
|
<Link href="https://docs.npmjs.com/misc/semver">semver range</Link>{' '}
|
||||||
npm
|
or a <Link href="https://docs.npmjs.com/cli/dist-tag">tag</Link>{' '}
|
||||||
</a>
|
instead of a fixed version number, or omit the version/tag entirely
|
||||||
. Use it to quickly and easily load any file from any package using
|
to use the <code>latest</code> tag.
|
||||||
a URL like:
|
</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>
|
</p>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
css={{
|
css={{
|
||||||
textAlign: 'center',
|
margin: '4em 0',
|
||||||
backgroundColor: '#eee',
|
display: 'flex',
|
||||||
margin: '2em 0',
|
justifyContent: 'center'
|
||||||
padding: '5px 0'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
unpkg.com/:package@:version/:file
|
<AboutLogo>
|
||||||
|
<a href="https://www.cloudflare.com">
|
||||||
|
<AboutLogoImage
|
||||||
|
alt="Cloudflare"
|
||||||
|
src={CloudflareLogo}
|
||||||
|
height="100"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</AboutLogo>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{hasStats && <Stats data={stats} />}
|
<p>
|
||||||
</header>
|
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">
|
<div
|
||||||
Examples
|
css={{
|
||||||
</h3>
|
margin: '4em 0 0',
|
||||||
|
display: 'flex',
|
||||||
<p>Using a fixed version:</p>
|
justifyContent: 'center'
|
||||||
|
}}
|
||||||
<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}
|
|
||||||
>
|
>
|
||||||
semver range
|
<AboutLogo>
|
||||||
</a>{' '}
|
<a href="https://cloud.google.com">
|
||||||
or a{' '}
|
<AboutLogoImage
|
||||||
<a
|
alt="Google Cloud"
|
||||||
title="tags"
|
src={GoogleCloudLogo}
|
||||||
href="https://docs.npmjs.com/cli/dist-tag"
|
width="320"
|
||||||
css={linkStyle}
|
/>
|
||||||
>
|
</a>
|
||||||
tag
|
</AboutLogo>
|
||||||
</a>{' '}
|
</div>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -505,7 +412,6 @@ export default function App() {
|
||||||
<p>© {new Date().getFullYear()} UNPKG</p>
|
<p>© {new Date().getFullYear()} UNPKG</p>
|
||||||
<p css={{ fontSize: '1.5rem' }}>
|
<p css={{ fontSize: '1.5rem' }}>
|
||||||
<a
|
<a
|
||||||
title="Twitter"
|
|
||||||
href="https://twitter.com/unpkg"
|
href="https://twitter.com/unpkg"
|
||||||
css={{
|
css={{
|
||||||
color: '#aaa',
|
color: '#aaa',
|
||||||
|
|
@ -516,7 +422,6 @@ export default function App() {
|
||||||
<TwitterIcon />
|
<TwitterIcon />
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
title="GitHub"
|
|
||||||
href="https://github.com/mjackson/unpkg"
|
href="https://github.com/mjackson/unpkg"
|
||||||
css={{
|
css={{
|
||||||
color: '#aaa',
|
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