Merge pull request #223 from FormidableLabs/jp-update-demo

modernise demo site
FormidableLabs · Sep 27, 2020 · 00ca573 · 00ca573
2 parents d01e04c + c3c4430
commit 00ca573
Show file tree

Hide file tree

Showing 8 changed files with 3,082 additions and 3,434 deletions.
diff --git a/demo/.babelrc b/demo/.babelrc
@@ -1,13 +1,13 @@
 {
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    ["babel-plugin-styled-components", {
-      "displayName": true,
-      "ssr": true,
-      "uglifyPure": false
-    }],
-    "babel-plugin-polished"
-  ]
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        ["styled-components", {
+            "displayName": true,
+            "ssr": true,
+            "uglifyPure": false
+        }],
+        "polished"
+    ]
 }
diff --git a/demo/components/GlobalStyle.js b/demo/components/GlobalStyle.js
@@ -0,0 +1,64 @@
+import { createGlobalStyle } from 'styled-components';
+import { background } from '../utils/colors';
+
+const resetStyles = `
+*,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
+`;
+
+const mainStyles = `
+  @font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+  }
+
+  @font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+  }
+
+  @font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweteM9fzAXBk846EtUMhet0E.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+  }
+
+  html, body {
+    font-size: 16px;
+    line-height: 1.3;
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-weight: normal;
+    font-style: normal;
+    padding: 0;
+    margin: 0;
+    background: ${background};
+    color: #f8f8f2;
+  }
+
+  .root {
+    position: relative;
+    overflow: auto;
+    min-height: 100vh;
+    z-index: 0;
+  }
+
+  @media (max-width: 1200px) {
+    html, body {
+      font-size: 14px;
+    }
+  }
+`;
+
+const GlobalStyle = createGlobalStyle`
+    ${resetStyles}
+    ${mainStyles}
+`;
+
+export default GlobalStyle;
diff --git a/demo/components/Header.js b/demo/components/Header.js
@@ -19,8 +19,8 @@ const SubTitle = styled.h2`
   }
 `;
 
-const StyledProjectBadge = styled(ProjectBadge)`
-  height: 230px;
+const BadgeContainer = styled.div`
+  width: 230px;
 `;
 
 const Title = styled.h1`
@@ -82,11 +82,13 @@ const Container = styled.div`
 const Header = () => (
   <Container>
     <TitleRow>
-      <StyledProjectBadge
-        color="#f677e1"
-        abbreviation="Rl"
-        description="React Live"
-      />
+      <BadgeContainer>
+        <ProjectBadge
+          color="#f677e1"
+          abbreviation="Rl"
+          description="React Live"
+        />
+      </BadgeContainer>
 
       <div>
         <Title>React Live</Title>

diff --git a/demo/next.config.js b/demo/next.config.js
@@ -2,19 +2,8 @@ const path = require('path');
 
 module.exports = {
   webpack: config => {
-    if (process.env.CONTEXT) {
-      return config;
-    }
-
-    config.resolve.alias = {
-      'react-live': path.resolve('../'),
-      react: path.resolve('../node_modules/react'),
-      'react-dom': path.resolve('../node_modules/react-dom')
-    };
+    config.resolve.alias['react-live'] = path.resolve('../');
 
     return config;
-  },
-  exportPathMap: () => ({
-    '/': { page: '/' }
-  })
+  }
 };
diff --git a/demo/package.json b/demo/package.json
@@ -1,29 +1,26 @@
 {
   "name": "react-live-demo",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "license": "MIT",
   "scripts": {
     "prebuild": "cd .. && yarn && yarn build",
     "prebuild:npm": "cd .. && npm i && npm run build",
-    "dev": "next",
-    "build": "next build",
-    "start": "NODE_ENV=production next start"
+    "dev": "next dev",
+    "build": "next build && next export",
+    "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-polished": "^1.0.3",
-    "babel-plugin-styled-components": "^1.5.0",
-    "express": "^4.15.2",
-    "formidable-oss-badges": "^0.2.1",
-    "lru-cache": "^4.0.2",
-    "module-alias": "^2.0.0",
-    "next": "^5.0.0",
-    "polished": "^1.0.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-is": "^16.9.0",
-    "react-live": "^2.1.2",
-    "styled-components": "^5.0.0-beta.8",
-    "stylis": "^3.5.4"
+    "formidable-oss-badges": "^0.3.5",
+    "next": "9.5.3",
+    "polished": "^3.6.7",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-live": "^2.2.2",
+    "styled-components": "^5.2.0"
+  },
+  "devDependencies": {
+    "babel-plugin-polished": "^1.1.0",
+    "babel-plugin-styled-components": "^1.11.1"
   }
 }
diff --git a/demo/pages/_app.js b/demo/pages/_app.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Head from 'next/head';
+import GlobalStyle from '../components/GlobalStyle';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>React Live Demo</title>
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+      </Head>
+      <GlobalStyle />
+      <Component {...pageProps} />
+    </>
+  );
+}
diff --git a/demo/pages/_document.js b/demo/pages/_document.js
@@ -1,100 +1,44 @@
-import Document, { Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
-import { background } from '../utils/colors';
-
-const resetStyles = `
-*,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
-`;
-
-const mainStyles = `
-  @font-face {
-    font-family: 'Source Code Pro';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-  }
-
-  @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-  }
-
-  @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 500;
-    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweteM9fzAXBk846EtUMhet0E.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-  }
-
-  html, body {
-    font-size: 16px;
-    line-height: 1.3;
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-weight: normal;
-    font-style: normal;
-    padding: 0;
-    margin: 0;
-    background: ${background};
-    color: #f8f8f2;
-  }
-
-  .root {
-    position: relative;
-    overflow: auto;
-    min-height: 100vh;
-    z-index: 0;
-  }
-
-  @media (max-width: 1200px) {
-    html, body {
-      font-size: 14px;
-    }
-  }
-`;
-
-const globalStyles = resetStyles + '\n' + mainStyles + '\n';
 
 export default class MyDocument extends Document {
-  static getInitialProps({ renderPage }) {
+  static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet();
-
-    const page = renderPage(Component => props =>
-      sheet.collectStyles(<Component {...props} />)
-    );
-
-    const styleElements = sheet.getStyleElement();
-    return { ...page, styleElements };
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      };
+    } finally {
+      sheet.seal();
+    }
   }
 
   render() {
-    const { styleElements } = this.props;
-
     return (
-      <html>
-        <Head>
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-          <title>React Live Demo</title>
-
-          <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
-          <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
-          {styleElements}
-        </Head>
-
+      <Html>
+        <Head />
         <body>
           <div className="root">
             <Main />
           </div>
 
           <NextScript />
         </body>
-      </html>
+      </Html>
     );
   }
 }