186526
/
unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Google Cloud logo + sponsorship info 

- Also fixed some horizontal scrolling issues
This commit is contained in:
Michael Jackson 2020-06-02 12:29:37 -07:00
parent ebe058b092
commit 7215072c72
4 changed files with 459 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
modules/client/browse/App.js
View File

@ -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 }) {
return (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
{...rest}
css={{
color: '#0076ff', color: '#0076ff',
textDecoration: 'none', textDecoration: 'none',
':hover': { ':hover': {
textDecoration: 'underline' 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,10 +179,6 @@ export default function App({
const maxContentWidth = 940; const maxContentWidth = 940;
return ( return (
<PackageInfoProvider
packageName={packageName}
packageVersion={packageVersion}
>
<Fragment> <Fragment>
<Global styles={globalStyles} /> <Global styles={globalStyles} />
<Global styles={lightCodeStyles} /> <Global styles={lightCodeStyles} />
@ -193,17 +191,23 @@ export default function App({
margin: '0 auto' margin: '0 auto'
}} }}
> >
<header css={{ textAlign: 'center' }}> <header css={{ marginTop: '2rem' }}>
<h1 css={{ fontSize: '3rem', marginTop: '2rem' }}> <h1
css={{
textAlign: 'center',
fontSize: '3rem',
letterSpacing: '0.05em'
}}
>
<a href="/" css={{ color: '#000', textDecoration: 'none' }}> <a href="/" css={{ color: '#000', textDecoration: 'none' }}>
UNPKG UNPKG
</a> </a>
</h1> </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>
@ -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> <nav>
{breadcrumbs.map((item, index, array) => ( {breadcrumbs.map((item, index, array) => (
<span key={index}> <Fragment key={index}>
{index !== 0 && ( {index !== 0 && (
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span> <span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
)} )}
@ -231,7 +242,7 @@ export default function App({
) : ( ) : (
item item
)} )}
</span> </Fragment>
))} ))}
</nav> </nav>
</h1> </h1>
@ -296,12 +307,17 @@ export default function App({
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}
</PackageInfoProvider>
</div> </div>
</div> </div>
@ -352,7 +368,6 @@ export default function App({
</div> </div>
</footer> </footer>
</Fragment> </Fragment>
</PackageInfoProvider>
); );
} }

263
modules/client/main/App.js
View File

@ -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) {
return (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
{...props}
css={{
color: '#0076ff', color: '#0076ff',
textDecoration: 'none', textDecoration: 'none',
':hover': { ':hover': {
textDecoration: 'underline' 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,33 +118,25 @@ export default function App() {
return ( return (
<Fragment> <Fragment>
<div
css={{
maxWidth: 740,
margin: '0 auto',
padding: '0 20px'
}}
>
<Global styles={globalStyles} /> <Global styles={globalStyles} />
<div css={{ maxWidth: 740, margin: '0 auto' }}>
<div css={{ padding: '0 20px' }}>
<header> <header>
<h1 <h1
css={{ css={{
textTransform: 'uppercase',
textAlign: 'center', textAlign: 'center',
fontSize: '5em' fontSize: '4.5em',
letterSpacing: '0.05em'
}} }}
> >
unpkg UNPKG
</h1> </h1>
<p> <p>
unpkg is a fast, global content delivery network for everything on{' '} unpkg is a fast, global content delivery network for everything on{' '}
<a href="https://www.npmjs.com/" css={linkStyle}> <Link href="https://www.npmjs.com/">npm</Link>. Use it to quickly
npm and easily load any file from any package using a URL like:
</a>
. Use it to quickly and easily load any file from any package using
a URL like:
</p> </p>
<div <div
@ -165,64 +161,35 @@ export default function App() {
<ul> <ul>
<li> <li>
<a <Link href="/react@16.7.0/umd/react.production.min.js">
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 unpkg.com/react@16.7.0/umd/react.production.min.js
</a> </Link>
</li> </li>
<li> <li>
<a <Link href="/react-dom@16.7.0/umd/react-dom.production.min.js">
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 unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js
</a> </Link>
</li> </li>
</ul> </ul>
<p> <p>
You may also use a{' '} You may also use a{' '}
<a <Link href="https://docs.npmjs.com/misc/semver">semver range</Link>{' '}
title="semver" or a <Link href="https://docs.npmjs.com/cli/dist-tag">tag</Link>{' '}
href="https://docs.npmjs.com/misc/semver" instead of a fixed version number, or omit the version/tag entirely
css={linkStyle} to use the <code>latest</code> tag.
>
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> </p>
<ul> <ul>
<li> <li>
<a <Link href="/react@^16/umd/react.production.min.js">
title="react.production.min.js"
href="/react@^16/umd/react.production.min.js"
css={linkStyle}
>
unpkg.com/react@^16/umd/react.production.min.js unpkg.com/react@^16/umd/react.production.min.js
</a> </Link>
</li> </li>
<li> <li>
<a <Link href="/react/umd/react.production.min.js">
title="react.production.min.js"
href="/react/umd/react.production.min.js"
css={linkStyle}
>
unpkg.com/react/umd/react.production.min.js unpkg.com/react/umd/react.production.min.js
</a> </Link>
</li> </li>
</ul> </ul>
@ -234,14 +201,10 @@ export default function App() {
<ul> <ul>
<li> <li>
<a title="jQuery" href="/jquery" css={linkStyle}> <Link href="/jquery">unpkg.com/jquery</Link>
unpkg.com/jquery
</a>
</li> </li>
<li> <li>
<a title="Three.js" href="/three" css={linkStyle}> <Link href="/three">unpkg.com/three</Link>
unpkg.com/three
</a>
</li> </li>
</ul> </ul>
@ -252,22 +215,10 @@ export default function App() {
<ul> <ul>
<li> <li>
<a <Link href="/react/">unpkg.com/react/</Link>
title="Index of the react package"
href="/react/"
css={linkStyle}
>
unpkg.com/react/
</a>
</li> </li>
<li> <li>
<a <Link href="/react-router/">unpkg.com/react-router/</Link>
title="Index of the react-router package"
href="/react-router/"
css={linkStyle}
>
unpkg.com/react-router/
</a>
</li> </li>
</ul> </ul>
@ -289,13 +240,9 @@ export default function App() {
</dt> </dt>
<dd> <dd>
Expands all{' '} Expands all{' '}
<a <Link href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier">
title="bare import specifiers"
href="https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier"
css={linkStyle}
>
&ldquo;bare&rdquo; <code>import</code> specifiers &ldquo;bare&rdquo; <code>import</code> specifiers
</a>{' '} </Link>{' '}
in JavaScript modules to unpkg URLs. This feature is{' '} in JavaScript modules to unpkg URLs. This feature is{' '}
<em>very experimental</em> <em>very experimental</em>
</dd> </dd>
@ -306,35 +253,31 @@ export default function App() {
</h3> </h3>
<p> <p>
The CDN caches files based on their permanent URL, which includes the The CDN caches files based on their permanent URL, which includes
npm package version. This works because npm does not allow package the npm package version. This works because npm does not allow
authors to overwrite a package that has already been published with a package authors to overwrite a package that has already been
different one at the same version number. published with a different one at the same version number.
</p> </p>
<p> <p>
Browsers are instructed (via the <code>Cache-Control</code> header) to Browsers are instructed (via the <code>Cache-Control</code> header)
cache assets indefinitely (1 year). to cache assets indefinitely (1 year).
</p> </p>
<p> <p>
URLs that do not specify a package version number redirect to one that URLs that do not specify a package version number redirect to one
does. This is the <code>latest</code> version when no version is that does. This is the <code>latest</code> version when no version
specified, or the <code>maxSatisfying</code> version when a{' '} is specified, or the <code>maxSatisfying</code> version when a{' '}
<a <Link href="https://github.com/npm/node-semver">
title="semver"
href="https://github.com/npm/node-semver"
css={linkStyle}
>
semver version semver version
</a>{' '} </Link>{' '}
is given. Redirects are cached for 10 minutes at the CDN, 1 minute in is given. Redirects are cached for 10 minutes at the CDN, 1 minute
browsers. in browsers.
</p> </p>
<p> <p>
If you want users to be able to use the latest version when you cut a If you want users to be able to use the latest version when you cut
new release, the best policy is to put the version number in the URL a new release, the best policy is to put the version number in the
directly in your installation instructions. This will also load more URL directly in your installation instructions. This will also load
quickly because we won&apos;t have to resolve the latest version and more quickly because we won&apos;t have to resolve the latest
redirect them. version and redirect them.
</p> </p>
<h3 css={{ fontSize: '1.6em' }} id="workflow"> <h3 css={{ fontSize: '1.6em' }} id="workflow">
@ -342,13 +285,11 @@ export default function App() {
</h3> </h3>
<p> <p>
For npm package authors, unpkg relieves the burden of publishing your For npm package authors, unpkg relieves the burden of publishing
code to a CDN in addition to the npm registry. All you need to do is your code to a CDN in addition to the npm registry. All you need to
include your{' '} do is include your{' '}
<a title="UMD" href="https://github.com/umdjs/umd" css={linkStyle}> <Link href="https://github.com/umdjs/umd">UMD</Link> build in your
UMD npm package (not your repo, that&apos;s different!).
</a>{' '}
build in your npm package (not your repo, that&apos;s different!).
</p> </p>
<p>You can do this easily using the following setup:</p> <p>You can do this easily using the following setup:</p>
@ -360,13 +301,9 @@ export default function App() {
</li> </li>
<li> <li>
Add the <code>umd</code> directory to your{' '} Add the <code>umd</code> directory to your{' '}
<a <Link href="https://docs.npmjs.com/files/package.json#files">
title="package.json files array"
href="https://docs.npmjs.com/files/package.json#files"
css={linkStyle}
>
files array files array
</a>{' '} </Link>{' '}
in <code>package.json</code> in <code>package.json</code>
</li> </li>
<li> <li>
@ -376,8 +313,8 @@ export default function App() {
</ul> </ul>
<p> <p>
That&apos;s it! Now when you <code>npm publish</code> you&apos;ll have That&apos;s it! Now when you <code>npm publish</code> you&apos;ll
a version available on unpkg as well. have a version available on unpkg as well.
</p> </p>
<h3 css={{ fontSize: '1.6em' }} id="about"> <h3 css={{ fontSize: '1.6em' }} id="about">
@ -386,44 +323,19 @@ export default function App() {
<p> <p>
unpkg is an{' '} unpkg is an{' '}
<a <Link href="https://github.com/mjackson/unpkg">open source</Link>{' '}
title="unpkg on GitHub"
href="https://github.com/mjackson/unpkg"
css={linkStyle}
>
open source
</a>{' '}
project built and maintained by{' '} project built and maintained by{' '}
<a <Link href="https://twitter.com/mjackson">Michael Jackson</Link>.
title="mjackson on Twitter" unpkg is not affiliated with or supported by npm, Inc. in any way.
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 Please do not contact npm for help with unpkg. Instead, please reach
out to{' '} out to <Link href="https://twitter.com/unpkg">@unpkg</Link> with any
<a questions or concerns.
title="unpkg on Twitter"
href="https://twitter.com/unpkg"
css={linkStyle}
>
@unpkg
</a>{' '}
with any questions or concerns.
</p> </p>
<p> <p>
The unpkg CDN is powered by{' '} The unpkg CDN is powered by{' '}
<a <Link href="https://www.cloudflare.com">Cloudflare</Link>, one of
title="Cloudflare" the world&apos;s largest and fastest cloud network platforms.{' '}
href="https://www.cloudflare.com"
css={linkStyle}
>
Cloudflare
</a>
, one of the world&apos;s largest and fastest cloud network platforms.{' '}
{hasStats && ( {hasStats && (
<span> <span>
In the past month, Cloudflare served over{' '} In the past month, Cloudflare served over{' '}
@ -442,7 +354,7 @@ export default function App() {
}} }}
> >
<AboutLogo> <AboutLogo>
<a title="Cloudflare" href="https://www.cloudflare.com"> <a href="https://www.cloudflare.com">
<AboutLogoImage <AboutLogoImage
alt="Cloudflare" alt="Cloudflare"
src={CloudflareLogo} src={CloudflareLogo}
@ -453,20 +365,10 @@ export default function App() {
</div> </div>
<p> <p>
The origin servers for unpkg are powered by{' '} The origin infrastructure runs on{' '}
<a <Link href="https://cloud.google.com/">Google Cloud</Link> which
title="Google Cloud" automatically scales the number of available servers to meet the
href="https://cloud.google.com/" current demand.
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&apos;s most popular libraries for building
incredible user experiences on both desktop and mobile.
</p> </p>
<div <div
@ -477,12 +379,17 @@ export default function App() {
}} }}
> >
<AboutLogo> <AboutLogo>
<a title="Angular" href="https://angular.io"> <a href="https://cloud.google.com">
<AboutLogoImage alt="Angular" src={AngularLogo} width="200" /> <AboutLogoImage
alt="Google Cloud"
src={GoogleCloudLogo}
width="320"
/>
</a> </a>
</AboutLogo> </AboutLogo>
</div> </div>
</div> </div>
</div>
<footer <footer
css={{ css={{
@ -505,7 +412,6 @@ export default function App() {
<p>&copy; {new Date().getFullYear()} UNPKG</p> <p>&copy; {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',

BIN
modules/client/main/images/AngularLogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
modules/client/main/images/GoogleCloudLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB