From acc48b533b09f7ec8ee01d66c0a03952a53d8df3 Mon Sep 17 00:00:00 2001 From: Neo Chang Date: Sun, 15 Jul 2018 22:36:36 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E6=88=90material-ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header.js | 64 +++++++++ components/Layout.js | 34 +++++ libs/getPageContext.js | 44 +++++++ package.json | 1 + pages/_app.js | 46 +++++++ pages/_document.js | 80 ++++++++++++ pages/index.js | 14 +- yarn.lock | 289 ++++++++++++++++++++++++++++++++++++++++- 8 files changed, 566 insertions(+), 6 deletions(-) create mode 100644 components/Header.js create mode 100644 components/Layout.js create mode 100644 libs/getPageContext.js create mode 100644 pages/_app.js create mode 100644 pages/_document.js diff --git a/components/Header.js b/components/Header.js new file mode 100644 index 0000000..ccd5149 --- /dev/null +++ b/components/Header.js @@ -0,0 +1,64 @@ +import React from 'react' +import { AppBar, Toolbar, Typography, Button } from '@material-ui/core' +import { withStyles } from '@material-ui/core/styles' + +import { Link } from '../routes' + +const styles = { + wrapper: { + margin: '0 auto', + width: '80%', + maxWidth: '1200px', + display: 'flex' + }, + brand: { + borderRight: '2px solid #CCCCCC', + paddingRight: '1em', + marginRight: '1em' + }, + toolbar: { + padding: 0, + flex: 1 + }, + flexContainer: { + flex: 1, + display: 'flex' + }, + anchor: { + display: 'block', + textDecoration: 'none', + marginRight: '16px' + } +} + +class Header extends React.Component { + render() { + const { classes } = this.props + + return ( + +
+ + + 众筹 DApp + +

+ + + 项目列表 + + +

+ + + + +
+ + ) + } +} + +export default withStyles(styles)(Header) diff --git a/components/Layout.js b/components/Layout.js new file mode 100644 index 0000000..6c5698d --- /dev/null +++ b/components/Layout.js @@ -0,0 +1,34 @@ +import React from 'react' +import { withStyles } from '@material-ui/core/styles' + +import Header from './Header' + +const styles = { + container: { + display: 'flex', + flexDirection: 'column', + width: '100%', + minHeight: '100vh' + }, + wrapper: { + margin: '0 auto', + width: '80%', + maxWidth: '1200px', + marginTop: '1em' + } +} + +class Layout extends React.Component { + render() { + const { classes } = this.props + + return ( +
+
+
{this.props.children}
+
+ ) + } +} + +export default withStyles(styles)(Layout) diff --git a/libs/getPageContext.js b/libs/getPageContext.js new file mode 100644 index 0000000..2d16bd2 --- /dev/null +++ b/libs/getPageContext.js @@ -0,0 +1,44 @@ +/* eslint-disable no-underscore-dangle */ +import { SheetsRegistry } from 'jss' +import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles' +import purple from '@material-ui/core/colors/purple' +import green from '@material-ui/core/colors/green' +// A theme with custom primary and secondary color. +// It's optional. +const theme = createMuiTheme({ + palette: { + primary: { + light: purple[300], + main: purple[500], + dark: purple[700] + }, + secondary: { + light: green[300], + main: green[500], + dark: green[700] + } + } +}) +function createPageContext() { + return { + theme, + // This is needed in order to deduplicate the injection of CSS in the page. + sheetsManager: new Map(), + // This is needed in order to inject the critical CSS. + sheetsRegistry: new SheetsRegistry(), + // The standard class name generator. + generateClassName: createGenerateClassName() + } +} +export default function getPageContext() { + // Make sure to create a new context for every server-side request so that data + // isn't shared between connections (which would be bad). + if (!process.browser) { + return createPageContext() + } + // Reuse context on the client-side. + if (!global.__INIT_MATERIAL_UI__) { + global.__INIT_MATERIAL_UI__ = createPageContext() + } + return global.__INIT_MATERIAL_UI__ +} diff --git a/package.json b/package.json index 1f94995..920a1f4 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "author": "", "license": "ISC", "dependencies": { + "@material-ui/core": "^1.4.0", "bignumber.js": "^7.2.1", "fs-extra": "^6.0.1", "next": "^6.1.1", diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..75ad928 --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,46 @@ +import React from 'react'; +import App, { Container } from 'next/app'; +import { MuiThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import JssProvider from 'react-jss/lib/JssProvider'; +import getPageContext from '../libs/getPageContext'; +class MyApp extends App { + constructor(props) { + super(props); + this.pageContext = getPageContext(); + } + pageContext = null; + 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 ( + + {/* 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 MyApp; \ No newline at end of file diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..f698f30 --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,80 @@ +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 ( + + + 众筹 DApp + + {/* 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: ( + +