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(
- <div>
- <Global styles={globalStyles} />
- <App {...props} />
- </div>,
- document.getElementById('root')
-);
+ReactDOM.hydrate(<App {...props} />, 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 (
<div css={{ maxWidth: 900, margin: '0 auto' }}>
+ <Global styles={globalStyles} />
+
<header
css={{
display: 'flex',
diff --git a/modules/client/main.js b/modules/client/main.js
index a61f6de..d2a4dcc 100644
--- a/modules/client/main.js
+++ b/modules/client/main.js
@@ -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'));
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 (
<div css={{ maxWidth: 700, margin: '0 auto' }}>
+ <Global styles={globalStyles} />
+
<header>
<h1 css={styles.heading}>unpkg</h1>