Add Google Cloud logo + sponsorship info
- Also fixed some horizontal scrolling issues
This commit is contained in:
Michael Jackson
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user