From 678aea91a08c698e399b25267ef0043f1add8d2d Mon Sep 17 00:00:00 2001 From: JP Date: Sun, 27 Sep 2020 09:27:06 +0100 Subject: [PATCH 1/2] modernise demo site --- demo/.babelrc | 22 +- demo/components/GlobalStyle.js | 64 + demo/components/Header.js | 16 +- demo/next.config.js | 15 +- demo/package.json | 31 +- demo/pages/_app.js | 17 + demo/pages/_document.js | 108 +- demo/yarn.lock | 6241 +++++++++++++++----------------- 8 files changed, 3081 insertions(+), 3433 deletions(-) create mode 100644 demo/components/GlobalStyle.js create mode 100644 demo/pages/_app.js diff --git a/demo/.babelrc b/demo/.babelrc index ba4eb8f7..5a9c4336 100644 --- 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 new file mode 100644 index 00000000..dc896c0d --- /dev/null +++ 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 index 9731502c..5ba05881 100644 --- 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 = () => ( - + + +
React Live diff --git a/demo/next.config.js b/demo/next.config.js index 55feca3d..989115d5 100644 --- 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 index c24bec1c..24973ef6 100644 --- 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", + "dev": "next dev", "build": "next build", - "start": "NODE_ENV=production next start" + "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 new file mode 100644 index 00000000..ca12c54c --- /dev/null +++ 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 ( + <> + + + React Live Demo + + + + + + ); +} diff --git a/demo/pages/_document.js b/demo/pages/_document.js index a654e838..1317c6a3 100644 --- a/demo/pages/_document.js +++ b/demo/pages/_document.js @@ -1,92 +1,36 @@ -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() - ); - - const styleElements = sheet.getStyleElement(); - return { ...page, styleElements }; + const originalRenderPage = ctx.renderPage; + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => sheet.collectStyles() + }); + + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ) + }; + } finally { + sheet.seal(); + } } render() { - const { styleElements } = this.props; - return ( - - - - - React Live Demo - - - -