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

Move global styles inside the app

This commit is contained in:
Michael Jackson 2019-01-14 13:28:52 -08:00
parent d2c5a51a30
commit edb042a92e
6 changed files with 71 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
functions/package-lock.json generated
View File

@ -980,6 +980,26 @@
"optional": true,
"requires": {
"readable-stream": "~1.0.32"
},
"dependencies": {
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"optional": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"optional": true
}
}
},
"bytebuffer": {
@ -3800,18 +3820,6 @@
"scheduler": "^0.12.0"
}
},
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"optional": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"regex-not": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@ -4230,12 +4238,6 @@
"strip-ansi": "^3.0.0"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"optional": true
},
"stringifier": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/stringifier/-/stringifier-1.4.0.tgz",

6
modules/actions/serveMainPage.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { renderToString } from 'react-dom/server';
import MainTemplate from '../client/MainTemplate';
import MainApp from '../client/main/App';
@ -8,9 +8,7 @@ import getEntryPoints from '../utils/getEntryPoints';
import renderTemplate from '../utils/renderTemplate';
export default function serveMainPage(req, res) {
const content = createHTML(
ReactDOMServer.renderToString(React.createElement(MainApp))
);
const content = createHTML(renderToString(React.createElement(MainApp)));
const entryPoints = getEntryPoints('main', {
es: 'module',

20
modules/client/autoIndex.js
View File

@ -1,26 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Global, css } from '@emotion/core';
import App from './autoIndex/App';
const globalStyles = css`
body {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
line-height: 1.7;
padding: 0px 10px 5px;
color: #000000;
}
`;
const props = window.__DATA__ || {};
ReactDOM.hydrate(
<div>
<Global styles={globalStyles} />
<App {...props} />
</div>,
document.getElementById('root')
);
ReactDOM.hydrate(<App {...props} />, document.getElementById('root'));

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

@ -1,8 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Global, css } from '@emotion/core';
import DirectoryListing from './DirectoryListing';
const globalStyles = css`
body {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
line-height: 1.7;
padding: 0px 10px 5px;
color: #000000;
}
`;
export default class App extends React.Component {
static defaultProps = {
availableVersions: []
@ -18,6 +30,8 @@ export default class App extends React.Component {
render() {
return (
<div css={{ maxWidth: 900, margin: '0 auto' }}>
<Global styles={globalStyles} />
<header
css={{
display: 'flex',

39
modules/client/main.js
View File

@ -1,43 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Global, css } from '@emotion/core';
import App from './main/App';
const globalStyles = css`
body {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
line-height: 1.7;
padding: 5px 20px;
color: #000000;
}
@media (min-width: 800px) {
body {
padding: 40px 20px 120px;
}
}
a:link {
color: blue;
}
a:visited {
color: rebeccapurple;
}
dd,
ul {
margin-left: 0;
padding-left: 25px;
}
`;
ReactDOM.render(
<div>
<Global styles={globalStyles} />
<App />
</div>,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

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

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Global, css } from '@emotion/core';
import formatBytes from 'pretty-bytes';
import formatDate from 'date-fns/format';
import parseDate from 'date-fns/parse';
@ -10,6 +11,36 @@ import formatPercent from '../utils/formatPercent';
import cloudflareLogo from './CloudflareLogo.png';
import herokuLogo from './HerokuLogo.png';
const globalStyles = css`
body {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
line-height: 1.7;
padding: 5px 20px;
color: #000000;
}
@media (min-width: 800px) {
body {
padding: 40px 20px 120px;
}
}
a:link {
color: blue;
}
a:visited {
color: rebeccapurple;
}
dd,
ul {
margin-left: 0;
padding-left: 25px;
}
`;
const styles = {
heading: {
margin: 0,
@ -84,6 +115,8 @@ export default class App extends React.Component {
return (
<div css={{ maxWidth: 700, margin: '0 auto' }}>
<Global styles={globalStyles} />
<header>
<h1 css={styles.heading}>unpkg</h1>