From edb042a92ebf6b09052da9934f46bd29eadbacc5 Mon Sep 17 00:00:00 2001 From: Michael Jackson Date: Mon, 14 Jan 2019 13:28:52 -0800 Subject: [PATCH] Move global styles inside the app --- functions/package-lock.json | 38 ++++++++++++++++--------------- modules/actions/serveMainPage.js | 6 ++--- modules/client/autoIndex.js | 20 +--------------- modules/client/autoIndex/App.js | 14 ++++++++++++ modules/client/main.js | 39 +------------------------------- modules/client/main/App.js | 33 +++++++++++++++++++++++++++ 6 files changed, 71 insertions(+), 79 deletions(-) diff --git a/functions/package-lock.json b/functions/package-lock.json index bafcf7a..feed175 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -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", diff --git a/modules/actions/serveMainPage.js b/modules/actions/serveMainPage.js index f569ddd..c3a0c68 100644 --- a/modules/actions/serveMainPage.js +++ b/modules/actions/serveMainPage.js @@ -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', diff --git a/modules/client/autoIndex.js b/modules/client/autoIndex.js index 881dece..b26b150 100644 --- a/modules/client/autoIndex.js +++ b/modules/client/autoIndex.js @@ -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( -
- - -
, - document.getElementById('root') -); +ReactDOM.hydrate(, document.getElementById('root')); diff --git a/modules/client/autoIndex/App.js b/modules/client/autoIndex/App.js index 63622d7..327d82e 100644 --- a/modules/client/autoIndex/App.js +++ b/modules/client/autoIndex/App.js @@ -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 (
+ +
- - -
, - document.getElementById('root') -); +ReactDOM.render(, document.getElementById('root')); diff --git a/modules/client/main/App.js b/modules/client/main/App.js index d78ff9c..517f6d1 100644 --- a/modules/client/main/App.js +++ b/modules/client/main/App.js @@ -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 (
+ +

unpkg