From 693c14e51598c0d59c2a4e9dcadd4078a0ff7e3b Mon Sep 17 00:00:00 2001 From: Michael Barlock Date: Fri, 9 Nov 2018 12:49:56 -0500 Subject: [PATCH] Add devkit base with gh-pages deploy on merge --- .eslintignore | 2 + .gitignore | 4 + .travis.yml | 9 + devkit/.eslintrc.js | 6 + devkit/pages/_app.js | 53 + devkit/pages/_document.js | 91 ++ devkit/pages/index.js | 28 + devkit/src/getPageContext.js | 54 ++ package.json | 9 +- yarn.lock | 1772 ++++++++++++++++++++++++++++++++-- 10 files changed, 1947 insertions(+), 81 deletions(-) create mode 100644 devkit/.eslintrc.js create mode 100644 devkit/pages/_app.js create mode 100644 devkit/pages/_document.js create mode 100644 devkit/pages/index.js create mode 100644 devkit/src/getPageContext.js diff --git a/.eslintignore b/.eslintignore index b509c88..5fc7ac7 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ coverage/ node_modules/ +devkit/.next +devkit/out diff --git a/.gitignore b/.gitignore index 1bbb954..845dbf9 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,7 @@ buck-out/ ./index.js # env .env.* + +# nextjs +devkit/.next +devkit/out diff --git a/.travis.yml b/.travis.yml index 7adf2a2..8ac8801 100644 --- a/.travis.yml +++ b/.travis.yml @@ -17,3 +17,12 @@ script: yarn ci branches: only: - master + +deploy: + provider: pages + local-dir: devkit/out + skip-cleanup: true + github-token: $GITHUB_TOKEN + keep-history: true + on: + branch: master diff --git a/devkit/.eslintrc.js b/devkit/.eslintrc.js new file mode 100644 index 0000000..6d157cf --- /dev/null +++ b/devkit/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + rules: { + 'require-jsdoc': 'off', + 'valid-jsdoc': 'off' + } +}; diff --git a/devkit/pages/_app.js b/devkit/pages/_app.js new file mode 100644 index 0000000..05e0717 --- /dev/null +++ b/devkit/pages/_app.js @@ -0,0 +1,53 @@ +import React from 'react'; +import App, { Container } from 'next/app'; +import Head from 'next/head'; +import { MuiThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import JssProvider from 'react-jss/lib/JssProvider'; +import getPageContext from '../src/getPageContext'; + +class Devkit extends App { + constructor(props) { + super(props); + this.pageContext = getPageContext(); + } + + componentDidMount() { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles && jssStyles.parentNode) { + jssStyles.parentNode.removeChild(jssStyles); + } + } + + render() { + const { Component, pageProps } = this.props; + return ( + + + My page + + {/* Wrap every page in Jss and Theme providers */} + + {/* MuiThemeProvider makes the theme available down the React + tree thanks to React context. */} + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + {/* Pass pageContext to the _document though the renderPage enhancer + to render collected styles on server side. */} + + + + + ); + } +} + +export default Devkit; diff --git a/devkit/pages/_document.js b/devkit/pages/_document.js new file mode 100644 index 0000000..ea59073 --- /dev/null +++ b/devkit/pages/_document.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Document, { Head, Main, NextScript } from 'next/document'; +import flush from 'styled-jsx/server'; + +class MyDocument extends Document { + render() { + const { pageContext } = this.props; + + return ( + + + + {/* Use minimum-scale=1 to enable GPU rasterization */} + + {/* PWA primary color */} + + + +
+ + + + ); + } +} + +MyDocument.getInitialProps = ctx => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + // Render app and page and get the context of the page with collected side effects. + let pageContext; + const page = ctx.renderPage(Component => { + const WrappedComponent = props => { + pageContext = props.pageContext; + return ; + }; + + WrappedComponent.propTypes = { + pageContext: PropTypes.object.isRequired + }; + + return WrappedComponent; + }); + + return { + ...page, + pageContext, + // Styles fragment is rendered after the app and page rendering finish. + styles: ( + <> +