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": [
["@babel/env", { "loose": true }],
"@babel/react"
["@babel/preset-env", { "loose": true }],
"@babel/preset-react",
"@emotion/babel-preset-css-prop"
],
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }]

10
modules/client/MainTemplate.js
View File

@ -15,7 +15,6 @@ export default function MainTemplate({
favicon,
data,
content,
globalScripts,
entryPoints
}) {
return (
@ -37,11 +36,6 @@ export default function MainTemplate({
</head>
<body>
<div id="root" dangerouslySetInnerHTML={content} />
{globalScripts.map(src => (
<script key={src} src={src} />
))}
{entryPoints.module &&
x(`
import('${entryPoints.module}');
@ -67,8 +61,7 @@ MainTemplate.defaultProps = {
title: 'UNPKG',
description: 'The CDN for everything on npm',
favicon: '/favicon.ico',
content: createHTML(''),
globalScripts: []
content: createHTML('')
};
if (process.env.NODE_ENV !== 'production') {
@ -82,7 +75,6 @@ if (process.env.NODE_ENV !== 'production') {
favicon: PropTypes.string,
data: PropTypes.any,
content: htmlType,
globalScripts: PropTypes.arrayOf(PropTypes.string),
entryPoints: PropTypes.shape({
module: 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';
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 {
static defaultProps = {
availableVersions: []
@ -40,20 +17,27 @@ export default class App extends React.Component {
render() {
return (
<div style={styles.wrapper}>
<header style={styles.header}>
<div css={{ maxWidth: 900, margin: '0 auto' }}>
<header
css={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<h1>
Index of /{this.props.packageName}@{this.props.packageVersion}
{this.props.filename}
</h1>
<div style={styles.versionSelector}>
<div css={{ float: 'right', lineHeight: '2.25em' }}>
Version:{' '}
<select
id="version"
defaultValue={this.props.packageVersion}
onChange={this.handleChange}
style={styles.versionDropdown}
css={{ fontSize: '1em' }}
>
{this.props.availableVersions.map(v => (
<option key={v} value={v}>
@ -74,7 +58,7 @@ export default class App extends React.Component {
<hr />
<address style={styles.address}>
<address css={{ textAlign: 'right' }}>
{this.props.packageName}@{this.props.packageVersion}
</address>
</div>

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

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

36
modules/client/main.js
View File

@ -27,47 +27,15 @@ const globalStyles = css`
color: rebeccapurple;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
dd,
ul {
margin-left: 0;
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(

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

@ -10,66 +10,16 @@ import formatPercent from '../utils/formatPercent';
import cloudflareLogo from './CloudflareLogo.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 }) {
return <div style={styles.logo}>{children}</div>;
return (
<div css={{ textAlign: 'center', flex: '1', maxWidth: '80%' }}>
{children}
</div>
);
}
function AboutLogoImage(props) {
return <img {...props} style={styles.logoImage} />;
return <img {...props} css={{ maxWidth: '60%' }} />;
}
function Stats({ data }) {
@ -115,9 +65,18 @@ export default class App extends React.Component {
const { stats } = this.state;
return (
<div className="wrapper">
<div css={{ maxWidth: 700, margin: '0 auto' }}>
<header>
<h1 style={styles.title}>unpkg</h1>
<h1
css={{
margin: 0,
textTransform: 'uppercase',
textAlign: 'center',
fontSize: '5em'
}}
>
unpkg
</h1>
<p>
unpkg is a fast, global{' '}
@ -129,12 +88,21 @@ export default class App extends React.Component {
like:
</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} />}
</header>
<h3>Examples</h3>
<h3 id="examples">Examples</h3>
<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>.
</p>
<div style={styles.logoList}>
<div
css={{
margin: '2em 0',
display: 'flex',
justifyContent: 'center'
}}
>
<AboutLogo>
<a href="https://www.cloudflare.com">
<AboutLogoImage src={cloudflareLogo} />

25
package-lock.json generated
View File

@ -70,7 +70,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz",
"integrity": "sha512-ebJ2JM6NAKW0fQEqN8hOLxK84RbRz9OkUhGS/Xd5u56ejMfVbayJ4+LykERZCOUM6faa6Fp3SZNX3fcT16MKHw==",
"dev": true,
"requires": {
"@babel/types": "^7.0.0",
"esutils": "^2.0.0"
@ -193,8 +192,7 @@
"@babel/helper-plugin-utils": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz",
"integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==",
"dev": true
"integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA=="
},
"@babel/helper-regex": {
"version": "7.0.0",
@ -373,7 +371,6 @@
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz",
"integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.0.0"
}
@ -611,7 +608,6 @@
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.2.0.tgz",
"integrity": "sha512-h/fZRel5wAfCqcKgq3OhbmYaReo7KkoJBpt8XnvpS7wqaNMqtw5xhxutzcm35iMUWucfAdT/nvGTsWln0JTg2Q==",
"dev": true,
"requires": {
"@babel/helper-builder-react-jsx": "^7.0.0",
"@babel/helper-plugin-utils": "^7.0.0",
@ -805,6 +801,17 @@
"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": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.0.tgz",
@ -1694,6 +1701,14 @@
"integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
"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": {
"version": "2.4.5",
"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"
},
"dependencies": {
"@emotion/babel-preset-css-prop": "^10.0.6",
"@emotion/core": "^10.0.6",
"date-fns": "^1.30.1",
"pretty-bytes": "^5.1.0",