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 = {
|
||||
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,10 +179,6 @@ export default function App({
|
|||
const maxContentWidth = 940;
|
||||
|
||||
return (
|
||||
<PackageInfoProvider
|
||||
packageName={packageName}
|
||||
packageVersion={packageVersion}
|
||||
>
|
||||
<Fragment>
|
||||
<Global styles={globalStyles} />
|
||||
<Global styles={lightCodeStyles} />
|
||||
|
|
@ -193,17 +191,23 @@ export default function App({
|
|||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<header css={{ textAlign: 'center' }}>
|
||||
<h1 css={{ fontSize: '3rem', marginTop: '2rem' }}>
|
||||
<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>
|
||||
|
|
@ -219,10 +223,17 @@ export default function App({
|
|||
}
|
||||
}}
|
||||
>
|
||||
<h1 css={{ fontSize: '1.5rem', fontWeight: 'normal', flex: 1 }}>
|
||||
<h1
|
||||
css={{
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'normal',
|
||||
flex: 1,
|
||||
wordBreak: 'break-all'
|
||||
}}
|
||||
>
|
||||
<nav>
|
||||
{breadcrumbs.map((item, index, array) => (
|
||||
<span key={index}>
|
||||
<Fragment key={index}>
|
||||
{index !== 0 && (
|
||||
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
||||
)}
|
||||
|
|
@ -231,7 +242,7 @@ export default function App({
|
|||
) : (
|
||||
item
|
||||
)}
|
||||
</span>
|
||||
</Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</h1>
|
||||
|
|
@ -296,12 +307,17 @@ export default function App({
|
|||
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}
|
||||
</PackageInfoProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -352,7 +368,6 @@ export default function App({
|
|||
</div>
|
||||
</footer>
|
||||
</Fragment>
|
||||
</PackageInfoProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
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,33 +118,25 @@ export default function App() {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: 740,
|
||||
margin: '0 auto',
|
||||
padding: '0 20px'
|
||||
}}
|
||||
>
|
||||
<Global styles={globalStyles} />
|
||||
|
||||
<div css={{ maxWidth: 740, margin: '0 auto' }}>
|
||||
<div css={{ padding: '0 20px' }}>
|
||||
<header>
|
||||
<h1
|
||||
css={{
|
||||
textTransform: 'uppercase',
|
||||
textAlign: 'center',
|
||||
fontSize: '5em'
|
||||
fontSize: '4.5em',
|
||||
letterSpacing: '0.05em'
|
||||
}}
|
||||
>
|
||||
unpkg
|
||||
UNPKG
|
||||
</h1>
|
||||
|
||||
<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:
|
||||
<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
|
||||
|
|
@ -165,64 +161,35 @@ export default function App() {
|
|||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
title="react.production.min.js"
|
||||
href="/react@16.7.0/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
<Link href="/react@16.7.0/umd/react.production.min.js">
|
||||
unpkg.com/react@16.7.0/umd/react.production.min.js
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="react-dom.production.min.js"
|
||||
href="/react-dom@16.7.0/umd/react-dom.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
<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
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
You may also use a{' '}
|
||||
<a
|
||||
title="semver"
|
||||
href="https://docs.npmjs.com/misc/semver"
|
||||
css={linkStyle}
|
||||
>
|
||||
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.
|
||||
<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>
|
||||
<a
|
||||
title="react.production.min.js"
|
||||
href="/react@^16/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
<Link href="/react@^16/umd/react.production.min.js">
|
||||
unpkg.com/react@^16/umd/react.production.min.js
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="react.production.min.js"
|
||||
href="/react/umd/react.production.min.js"
|
||||
css={linkStyle}
|
||||
>
|
||||
<Link href="/react/umd/react.production.min.js">
|
||||
unpkg.com/react/umd/react.production.min.js
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -234,14 +201,10 @@ export default function App() {
|
|||
|
||||
<ul>
|
||||
<li>
|
||||
<a title="jQuery" href="/jquery" css={linkStyle}>
|
||||
unpkg.com/jquery
|
||||
</a>
|
||||
<Link href="/jquery">unpkg.com/jquery</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Three.js" href="/three" css={linkStyle}>
|
||||
unpkg.com/three
|
||||
</a>
|
||||
<Link href="/three">unpkg.com/three</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -252,22 +215,10 @@ export default function App() {
|
|||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
title="Index of the react package"
|
||||
href="/react/"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react/
|
||||
</a>
|
||||
<Link href="/react/">unpkg.com/react/</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
title="Index of the react-router package"
|
||||
href="/react-router/"
|
||||
css={linkStyle}
|
||||
>
|
||||
unpkg.com/react-router/
|
||||
</a>
|
||||
<Link href="/react-router/">unpkg.com/react-router/</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -289,13 +240,9 @@ export default function App() {
|
|||
</dt>
|
||||
<dd>
|
||||
Expands all{' '}
|
||||
<a
|
||||
title="bare import specifiers"
|
||||
href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier"
|
||||
css={linkStyle}
|
||||
>
|
||||
<Link href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier">
|
||||
“bare” <code>import</code> specifiers
|
||||
</a>{' '}
|
||||
</Link>{' '}
|
||||
in JavaScript modules to unpkg URLs. This feature is{' '}
|
||||
<em>very experimental</em>
|
||||
</dd>
|
||||
|
|
@ -306,35 +253,31 @@ export default function App() {
|
|||
</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.
|
||||
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).
|
||||
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}
|
||||
>
|
||||
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
|
||||
</a>{' '}
|
||||
is given. Redirects are cached for 10 minutes at the CDN, 1 minute in
|
||||
browsers.
|
||||
</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.
|
||||
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">
|
||||
|
|
@ -342,13 +285,11 @@ export default function App() {
|
|||
</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!).
|
||||
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>
|
||||
|
|
@ -360,13 +301,9 @@ export default function App() {
|
|||
</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}
|
||||
>
|
||||
<Link href="https://docs.npmjs.com/files/package.json#files">
|
||||
files array
|
||||
</a>{' '}
|
||||
</Link>{' '}
|
||||
in <code>package.json</code>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -376,8 +313,8 @@ export default function App() {
|
|||
</ul>
|
||||
|
||||
<p>
|
||||
That's it! Now when you <code>npm publish</code> you'll have
|
||||
a version available on unpkg as well.
|
||||
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">
|
||||
|
|
@ -386,44 +323,19 @@ export default function App() {
|
|||
|
||||
<p>
|
||||
unpkg is an{' '}
|
||||
<a
|
||||
title="unpkg on GitHub"
|
||||
href="https://github.com/mjackson/unpkg"
|
||||
css={linkStyle}
|
||||
>
|
||||
open source
|
||||
</a>{' '}
|
||||
<Link href="https://github.com/mjackson/unpkg">open source</Link>{' '}
|
||||
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.
|
||||
<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{' '}
|
||||
<a
|
||||
title="unpkg on Twitter"
|
||||
href="https://twitter.com/unpkg"
|
||||
css={linkStyle}
|
||||
>
|
||||
@unpkg
|
||||
</a>{' '}
|
||||
with any questions or concerns.
|
||||
out to <Link href="https://twitter.com/unpkg">@unpkg</Link> 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.{' '}
|
||||
<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{' '}
|
||||
|
|
@ -442,7 +354,7 @@ export default function App() {
|
|||
}}
|
||||
>
|
||||
<AboutLogo>
|
||||
<a title="Cloudflare" href="https://www.cloudflare.com">
|
||||
<a href="https://www.cloudflare.com">
|
||||
<AboutLogoImage
|
||||
alt="Cloudflare"
|
||||
src={CloudflareLogo}
|
||||
|
|
@ -453,20 +365,10 @@ export default function App() {
|
|||
</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.
|
||||
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>
|
||||
|
||||
<div
|
||||
|
|
@ -477,12 +379,17 @@ export default function App() {
|
|||
}}
|
||||
>
|
||||
<AboutLogo>
|
||||
<a title="Angular" href="https://angular.io">
|
||||
<AboutLogoImage alt="Angular" src={AngularLogo} width="200" />
|
||||
<a href="https://cloud.google.com">
|
||||
<AboutLogoImage
|
||||
alt="Google Cloud"
|
||||
src={GoogleCloudLogo}
|
||||
width="320"
|
||||
/>
|
||||
</a>
|
||||
</AboutLogo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer
|
||||
css={{
|
||||
|
|
@ -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