├── .nvmrc ├── index.js ├── .gitignore ├── .babelrc ├── src ├── gatsby-browser.js ├── gatsby-node.js └── gatsby-ssr.js ├── .npmignore ├── README.md └── package.json /.nvmrc: -------------------------------------------------------------------------------- 1 | v8.2.1 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // noop 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /*.js 2 | !index.js 3 | .DS_Store 4 | .cache/ 5 | node_modules 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-1"], 3 | "plugins": [], 4 | } 5 | -------------------------------------------------------------------------------- /src/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // remove the JSS style tag generated on the server to avoid conflicts with the one added on the client 2 | exports.onInitialClientRender = () => { 3 | // eslint-disable-next-line no-undef 4 | const ssStyles = window.document.getElementById('server-side-jss') 5 | ssStyles && ssStyles.parentNode.removeChild(ssStyles) 6 | } 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | *.un~ 29 | yarn.lock 30 | src 31 | flow-typed 32 | coverage 33 | decls 34 | examples 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-plugin-material-ui 2 | 3 | Provide drop-in support for SSR using the material-ui library (v1-beta) 4 | 5 | ## Install 6 | 7 | `npm install --save gatsby-plugin-material-ui` 8 | 9 | ## How to use 10 | Define your material-ui theme. 11 | 12 | ```javascript 13 | import createMuiTheme from 'material-ui/styles/createMuiTheme' 14 | 15 | import purple from 'material-ui/colors/purple' 16 | import green from 'material-ui/colors/green' 17 | import red from 'material-ui/colors/red' 18 | 19 | export default createMuiTheme({ 20 | palette: { 21 | primary: purple, 22 | secondary: green, 23 | error: red, 24 | }, 25 | }) 26 | 27 | ``` 28 | 29 | And add the plugin to your `gatsby-config.js`. 30 | 31 | ```javascript 32 | { 33 | resolve: 'gatsby-plugin-material-ui', 34 | options: { 35 | pathToTheme: 'src/themes/default', 36 | }, 37 | }, 38 | ``` 39 | -------------------------------------------------------------------------------- /src/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const os = require('os') 4 | 5 | // Write out a theme module to .cache. 6 | 7 | exports.sourceNodes = ({ store }, pluginOptions) => { 8 | const program = store.getState().program 9 | 10 | let module 11 | if (pluginOptions.pathToTheme) { 12 | module = `module.exports = require("${path.join( 13 | program.directory, 14 | pluginOptions.pathToTheme 15 | )}")` 16 | if (os.platform() === 'win32') { 17 | module = module.split('\\').join('\\\\') 18 | } 19 | } else { 20 | module = `const styles = require('material-ui/styles') 21 | const theme = styles.createMuiTheme() 22 | module.exports = theme` 23 | } 24 | 25 | const dir = `${__dirname}/.cache` 26 | 27 | if (!fs.existsSync(dir)) { 28 | fs.mkdirSync(dir) 29 | } 30 | 31 | fs.writeFileSync(`${dir}/theme.js`, module) 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-plugin-material-ui", 3 | "version": "0.1.2", 4 | "description": "Gatsby plugin that adds SSR support for Material UI", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "babel src --out-dir . --ignore __tests__", 8 | "watch": "babel -w src --out-dir . --ignore __tests__", 9 | "prepublish": "npm run build" 10 | }, 11 | "keywords": [ 12 | "gatsby", 13 | "gatsby-plugin", 14 | "material-ui", 15 | "jss", 16 | "react-jss" 17 | ], 18 | "author": "Tyler Porter ", 19 | "license": "MIT", 20 | "dependencies": { 21 | "babel-runtime": "^6.26.0", 22 | "material-ui": "^1.0.0-beta.9", 23 | "react-jss": "^7.0.2" 24 | }, 25 | "devDependencies": { 26 | "babel-cli": "^6.26.0", 27 | "babel-preset-es2015": "^6.24.1", 28 | "babel-preset-react": "^6.24.1", 29 | "babel-preset-stage-1": "^6.24.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { renderToString } from 'react-dom/server' 3 | import { JssProvider, SheetsRegistry } from 'react-jss' 4 | import { create } from 'jss' 5 | import preset from 'jss-preset-default' 6 | import { MuiThemeProvider } from 'material-ui/styles' 7 | import createGenerateClassName from 'material-ui/styles/createGenerateClassName' 8 | import theme from './.cache/theme' // eslint-disable-line 9 | 10 | exports.replaceRenderer = ({ 11 | bodyComponent, 12 | replaceBodyHTMLString, 13 | setHeadComponents, 14 | }) => { 15 | const sheets = new SheetsRegistry() 16 | const jss = create(preset()) 17 | jss.options.createGenerateClassName = createGenerateClassName 18 | const bodyHTML = renderToString( 19 | 20 | 21 | {bodyComponent} 22 | 23 | 24 | ) 25 | 26 | replaceBodyHTMLString(bodyHTML) 27 | setHeadComponents([ 28 |