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

Use css prop

This commit is contained in:
Michael Jackson 2019-01-12 21:23:31 -08:00
parent 66b607843a
commit d13fedd940
8 changed files with 100 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/client/.babelrc
View File

@ -1,7 +1,8 @@
{ {
"presets": [ "presets": [
["@babel/env", { "loose": true }], ["@babel/preset-env", { "loose": true }],
"@babel/react" "@babel/preset-react",
"@emotion/babel-preset-css-prop"
], ],
"plugins": [ "plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }] ["@babel/plugin-proposal-class-properties", { "loose": true }]

10
modules/client/MainTemplate.js
View File

@ -15,7 +15,6 @@ export default function MainTemplate({
favicon, favicon,
data, data,
content, content,
globalScripts,
entryPoints entryPoints
}) { }) {
return ( return (
@ -37,11 +36,6 @@ export default function MainTemplate({
</head> </head>
<body> <body>
<div id="root" dangerouslySetInnerHTML={content} /> <div id="root" dangerouslySetInnerHTML={content} />
{globalScripts.map(src => (
<script key={src} src={src} />
))}
{entryPoints.module && {entryPoints.module &&
x(` x(`
import('${entryPoints.module}'); import('${entryPoints.module}');
@ -67,8 +61,7 @@ MainTemplate.defaultProps = {
title: 'UNPKG', title: 'UNPKG',
description: 'The CDN for everything on npm', description: 'The CDN for everything on npm',
favicon: '/favicon.ico', favicon: '/favicon.ico',
content: createHTML(''), content: createHTML('')
globalScripts: []
}; };
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
@ -82,7 +75,6 @@ if (process.env.NODE_ENV !== 'production') {
favicon: PropTypes.string, favicon: PropTypes.string,
data: PropTypes.any, data: PropTypes.any,
content: htmlType, content: htmlType,
globalScripts: PropTypes.arrayOf(PropTypes.string),
entryPoints: PropTypes.shape({ entryPoints: PropTypes.shape({
module: PropTypes.string, module: PropTypes.string,
nomodule: PropTypes.string nomodule: PropTypes.string

40
modules/client/autoIndex/App.js
View File

@ -3,29 +3,6 @@ import PropTypes from 'prop-types';
import DirectoryListing from './DirectoryListing'; import DirectoryListing from './DirectoryListing';
const styles = {
wrapper: {
maxWidth: 900,
margin: '0 auto'
},
header: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
versionSelector: {
float: 'right',
lineHeight: '2.25em'
},
versionDropdown: {
fontSize: '1em'
},
address: {
textAlign: 'right'
}
};
export default class App extends React.Component { export default class App extends React.Component {
static defaultProps = { static defaultProps = {
availableVersions: [] availableVersions: []
@ -40,20 +17,27 @@ export default class App extends React.Component {
render() { render() {
return ( return (
<div style={styles.wrapper}> <div css={{ maxWidth: 900, margin: '0 auto' }}>
<header style={styles.header}> <header
css={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<h1> <h1>
Index of /{this.props.packageName}@{this.props.packageVersion} Index of /{this.props.packageName}@{this.props.packageVersion}
{this.props.filename} {this.props.filename}
</h1> </h1>
<div style={styles.versionSelector}> <div css={{ float: 'right', lineHeight: '2.25em' }}>
Version:{' '} Version:{' '}
<select <select
id="version" id="version"
defaultValue={this.props.packageVersion} defaultValue={this.props.packageVersion}
onChange={this.handleChange} onChange={this.handleChange}
style={styles.versionDropdown} css={{ fontSize: '1em' }}
> >
{this.props.availableVersions.map(v => ( {this.props.availableVersions.map(v => (
<option key={v} value={v}> <option key={v} value={v}>
@ -74,7 +58,7 @@ export default class App extends React.Component {
<hr /> <hr />
<address style={styles.address}> <address css={{ textAlign: 'right' }}>
{this.props.packageName}@{this.props.packageVersion} {this.props.packageName}@{this.props.packageVersion}
</address> </address>
</div> </div>

51
modules/client/autoIndex/DirectoryListing.js
View File

@ -25,20 +25,15 @@ function getRelativeName(base, name) {
} }
const styles = { const styles = {
table: {
width: '100%',
borderCollapse: 'collapse',
font: '0.85em Monaco, monospace'
},
evenRow: {
backgroundColor: '#eee'
},
tableHead: { tableHead: {
textAlign: 'left', textAlign: 'left',
padding: '0.5em 1em' padding: '0.5em 1em'
}, },
tableCell: { tableCell: {
padding: '0.5em 1em' padding: '0.5em 1em'
},
evenRow: {
backgroundColor: '#eee'
} }
}; };
@ -48,14 +43,14 @@ export default function DirectoryListing({ filename, entry, entries }) {
if (filename !== '/') { if (filename !== '/') {
rows.push( rows.push(
<tr key=".."> <tr key="..">
<td style={styles.tableCell}> <td css={styles.tableCell}>
<a title="Parent directory" href="../"> <a title="Parent directory" href="../">
.. ..
</a> </a>
</td> </td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
</tr> </tr>
); );
} }
@ -71,14 +66,14 @@ export default function DirectoryListing({ filename, entry, entries }) {
rows.push( rows.push(
<tr key={name}> <tr key={name}>
<td style={styles.tableCell}> <td css={styles.tableCell}>
<a title={relName} href={href}> <a title={relName} href={href}>
{href} {href}
</a> </a>
</td> </td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
<td style={styles.tableCell}>-</td> <td css={styles.tableCell}>-</td>
</tr> </tr>
); );
}); });
@ -91,27 +86,33 @@ export default function DirectoryListing({ filename, entry, entries }) {
rows.push( rows.push(
<tr key={name}> <tr key={name}>
<td style={styles.tableCell}> <td css={styles.tableCell}>
<a title={relName} href={relName}> <a title={relName} href={relName}>
{relName} {relName}
</a> </a>
</td> </td>
<td style={styles.tableCell}>{contentType}</td> <td css={styles.tableCell}>{contentType}</td>
<td style={styles.tableCell}>{formatBytes(size)}</td> <td css={styles.tableCell}>{formatBytes(size)}</td>
<td style={styles.tableCell}>{lastModified}</td> <td css={styles.tableCell}>{lastModified}</td>
</tr> </tr>
); );
}); });
return ( return (
<div> <div>
<table style={styles.table}> <table
css={{
width: '100%',
borderCollapse: 'collapse',
font: '0.85em Monaco, monospace'
}}
>
<thead> <thead>
<tr> <tr>
<th style={styles.tableHead}>Name</th> <th css={styles.tableHead}>Name</th>
<th style={styles.tableHead}>Type</th> <th css={styles.tableHead}>Type</th>
<th style={styles.tableHead}>Size</th> <th css={styles.tableHead}>Size</th>
<th style={styles.tableHead}>Last Modified</th> <th css={styles.tableHead}>Last Modified</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

36
modules/client/main.js
View File

@ -27,47 +27,15 @@ const globalStyles = css`
color: rebeccapurple; color: rebeccapurple;
} }
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 { h3 {
font-size: 1.6em; font-size: 1.6em;
} }
dd,
ul { ul {
margin-left: 0;
padding-left: 25px; padding-left: 25px;
} }
dd {
margin-left: 25px;
}
table {
border: 1px solid black;
border: 0;
}
th {
text-align: left;
background-color: #eee;
}
th,
td {
padding: 5px;
}
th {
vertical-align: bottom;
}
td {
vertical-align: top;
}
.wrapper {
max-width: 700px;
margin: 0 auto;
}
`; `;
ReactDOM.render( ReactDOM.render(

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

@ -10,66 +10,16 @@ import formatPercent from '../utils/formatPercent';
import cloudflareLogo from './CloudflareLogo.png'; import cloudflareLogo from './CloudflareLogo.png';
import herokuLogo from './HerokuLogo.png'; import herokuLogo from './HerokuLogo.png';
const styles = {
title: {
margin: 0,
textTransform: 'uppercase',
textAlign: 'center',
fontSize: '5em'
},
nav: {
margin: '0 0 3em'
},
navList: {
margin: 0,
padding: 0,
display: 'flex',
justifyContent: 'center'
},
navListItem: {
flexBasis: 'auto',
listStyleType: 'none',
display: 'inline-block',
fontSize: '1.1em',
margin: '0 10px'
},
navLink: {
textDecoration: 'none',
color: 'black'
},
navUnderline: {
height: 4,
backgroundColor: 'black',
position: 'absolute',
left: 0
},
example: {
textAlign: 'center',
backgroundColor: '#eee',
margin: '2em 0',
padding: '5px 0'
},
logoList: {
margin: '2em 0',
display: 'flex',
justifyContent: 'center'
},
logo: {
textAlign: 'center',
flex: '1',
maxWidth: '80%'
},
logoImage: {
maxWidth: '60%'
}
};
function AboutLogo({ children }) { function AboutLogo({ children }) {
return <div style={styles.logo}>{children}</div>; return (
<div css={{ textAlign: 'center', flex: '1', maxWidth: '80%' }}>
{children}
</div>
);
} }
function AboutLogoImage(props) { function AboutLogoImage(props) {
return <img {...props} style={styles.logoImage} />; return <img {...props} css={{ maxWidth: '60%' }} />;
} }
function Stats({ data }) { function Stats({ data }) {
@ -115,9 +65,18 @@ export default class App extends React.Component {
const { stats } = this.state; const { stats } = this.state;
return ( return (
<div className="wrapper"> <div css={{ maxWidth: 700, margin: '0 auto' }}>
<header> <header>
<h1 style={styles.title}>unpkg</h1> <h1
css={{
margin: 0,
textTransform: 'uppercase',
textAlign: 'center',
fontSize: '5em'
}}
>
unpkg
</h1>
<p> <p>
unpkg is a fast, global{' '} unpkg is a fast, global{' '}
@ -129,12 +88,21 @@ export default class App extends React.Component {
like: like:
</p> </p>
<div style={styles.example}>unpkg.com/:package@:version/:file</div> <div
css={{
textAlign: 'center',
backgroundColor: '#eee',
margin: '2em 0',
padding: '5px 0'
}}
>
unpkg.com/:package@:version/:file
</div>
{stats && <Stats data={stats} />} {stats && <Stats data={stats} />}
</header> </header>
<h3>Examples</h3> <h3 id="examples">Examples</h3>
<p>Using a fixed version:</p> <p>Using a fixed version:</p>
@ -267,7 +235,13 @@ export default class App extends React.Component {
<a href="https://www.heroku.com">Heroku</a>. <a href="https://www.heroku.com">Heroku</a>.
</p> </p>
<div style={styles.logoList}> <div
css={{
margin: '2em 0',
display: 'flex',
justifyContent: 'center'
}}
>
<AboutLogo> <AboutLogo>
<a href="https://www.cloudflare.com"> <a href="https://www.cloudflare.com">
<AboutLogoImage src={cloudflareLogo} /> <AboutLogoImage src={cloudflareLogo} />

25
package-lock.json generated
View File

@ -70,7 +70,6 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz",
"integrity": "sha512-ebJ2JM6NAKW0fQEqN8hOLxK84RbRz9OkUhGS/Xd5u56ejMfVbayJ4+LykERZCOUM6faa6Fp3SZNX3fcT16MKHw==", "integrity": "sha512-ebJ2JM6NAKW0fQEqN8hOLxK84RbRz9OkUhGS/Xd5u56ejMfVbayJ4+LykERZCOUM6faa6Fp3SZNX3fcT16MKHw==",
"dev": true,
"requires": { "requires": {
"@babel/types": "^7.0.0", "@babel/types": "^7.0.0",
"esutils": "^2.0.0" "esutils": "^2.0.0"
@ -193,8 +192,7 @@
"@babel/helper-plugin-utils": { "@babel/helper-plugin-utils": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz",
"integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==", "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA=="
"dev": true
}, },
"@babel/helper-regex": { "@babel/helper-regex": {
"version": "7.0.0", "version": "7.0.0",
@ -373,7 +371,6 @@
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz",
"integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==", "integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==",
"dev": true,
"requires": { "requires": {
"@babel/helper-plugin-utils": "^7.0.0" "@babel/helper-plugin-utils": "^7.0.0"
} }
@ -611,7 +608,6 @@
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.2.0.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.2.0.tgz",
"integrity": "sha512-h/fZRel5wAfCqcKgq3OhbmYaReo7KkoJBpt8XnvpS7wqaNMqtw5xhxutzcm35iMUWucfAdT/nvGTsWln0JTg2Q==", "integrity": "sha512-h/fZRel5wAfCqcKgq3OhbmYaReo7KkoJBpt8XnvpS7wqaNMqtw5xhxutzcm35iMUWucfAdT/nvGTsWln0JTg2Q==",
"dev": true,
"requires": { "requires": {
"@babel/helper-builder-react-jsx": "^7.0.0", "@babel/helper-builder-react-jsx": "^7.0.0",
"@babel/helper-plugin-utils": "^7.0.0", "@babel/helper-plugin-utils": "^7.0.0",
@ -805,6 +801,17 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@emotion/babel-preset-css-prop": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.6.tgz",
"integrity": "sha512-sQTakjOx0DEN8TaMpvIrseXnfAVaLf9Xz+vHzO4eqLxc6NLDkANK93rtRcPc818mdUY0SvCEQvXac8jWpS5gJw==",
"requires": {
"@babel/plugin-transform-react-jsx": "^7.1.6",
"babel-plugin-emotion": "^10.0.6",
"babel-plugin-jsx-pragmatic": "^1.0.2",
"object-assign": "^4.1.1"
}
},
"@emotion/cache": { "@emotion/cache": {
"version": "10.0.0", "version": "10.0.0",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.0.tgz", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.0.tgz",
@ -1694,6 +1701,14 @@
"integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=", "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
"dev": true "dev": true
}, },
"babel-plugin-jsx-pragmatic": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-1.0.2.tgz",
"integrity": "sha1-QeK+uGQiNfNLKnqxLKOeByAbjlk=",
"requires": {
"babel-plugin-syntax-jsx": "^6.0.0"
}
},
"babel-plugin-macros": { "babel-plugin-macros": {
"version": "2.4.5", "version": "2.4.5",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.4.5.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.4.5.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"watch": "rollup -c -w" "watch": "rollup -c -w"
}, },
"dependencies": { "dependencies": {
"@emotion/babel-preset-css-prop": "^10.0.6",
"@emotion/core": "^10.0.6", "@emotion/core": "^10.0.6",
"date-fns": "^1.30.1", "date-fns": "^1.30.1",
"pretty-bytes": "^5.1.0", "pretty-bytes": "^5.1.0",