Migrate material-ui config to gatsby-plugin-material-ui

Author: Redande

gatsby-config.js

@@ -1,3 +1,6 @@
+const red = require("@material-ui/core/colors/red").default
+const blue = require("@material-ui/core/colors/blue").default
+
 module.exports = {
   siteMetadata: {
     title: "Ohjelmoinnin MOOC 2019",
@@ -144,6 +147,43 @@ module.exports = {
     {
       resolve: "gatsby-transformer-moocfi-exercises"
     },
+    {
+      resolve: 'gatsby-plugin-material-ui',
+      options: {
+        theme: {
+          palette: {
+            primary: {
+              light: blue[300],
+              main: blue[500],
+              dark: blue[700],
+            },
+            secondary: {
+              light: red[300],
+              main: red[500],
+              dark: red[700],
+            },
+          },
+          typography: {
+            useNextVariants: true,
+          },
+          overrides: {
+            MuiButton: {
+              root: {
+                textTransform: "none",
+              },
+            },
+            MuiTypography: {
+              body2: {
+                fontSize: "16px",
+              },
+              subheading: {
+                fontSize: "18px",
+              },
+            },
+          },
+        }
+      }
+    },
     `gatsby-plugin-meta-redirect` // make sure to put last in the array
   ]
 };

gatsby-ssr.js

@@ -5,47 +5,3 @@
  */
 
 // You can delete this file if you're not using it
-/* eslint-disable react/no-danger */
-
-const React = require('react')
-const { renderToString } = require('react-dom/server')
-const JssProvider = require('react-jss/lib/JssProvider').default
-const getPageContext = require('./src/getPageContext').default
-
-function replaceRenderer({
-  bodyComponent,
-  replaceBodyHTMLString,
-  setHeadComponents,
-}) {
-  // Get the context of the page to collected side effects.
-  const muiPageContext = getPageContext()
-
-  const bodyHTML = renderToString(
-    <JssProvider registry={muiPageContext.sheetsRegistry}>
-      {bodyComponent}
-    </JssProvider>
-  )
-
-  replaceBodyHTMLString(bodyHTML)
-  setHeadComponents([
-    <style
-      type="text/css"
-      id="jss-server-side"
-      key="jss-server-side"
-      dangerouslySetInnerHTML={{
-        __html: muiPageContext.sheetsRegistry.toString(),
-      }}
-    />,
-  ])
-}
-
-exports.replaceRenderer = replaceRenderer
-
-// It's not ready yet: https://github.com/gatsbyjs/gatsby/issues/8237.
-//
-// const withRoot = require('./src/withRoot').default;
-// const WithRoot = withRoot(props => props.children);
-
-// exports.wrapRootElement = ({ element }) => {
-//   return <WithRoot>{element}</WithRoot>;
-// };

package-lock.json

@@ -19,6 +19,7 @@
     "gatsby-plugin-catch-links": "^2.0.9",
     "gatsby-plugin-google-analytics": "^2.0.8",
     "gatsby-plugin-manifest": "^2.0.13",
+    "gatsby-plugin-material-ui": "^1.2.4",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-react-helmet": "^3.0.5",
     "gatsby-plugin-sharp": "^2.0.17",
@@ -35,8 +36,8 @@
     "gatsby-transformer-remark": "^2.1.19",
     "interactjs": "^1.3.4",
     "jquery": "^3.3.1",
-    "pdf-slideshow": "^0.1.4",
     "moment": "^2.24.0",
+    "pdf-slideshow": "^0.1.4",
     "prismjs": "^1.15.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",

package.json

@@ -5,7 +5,6 @@ import ContentArea from "../components/ContentArea"
 import TopBar from "../components/TopBar"
 import { StaticQuery, graphql } from "gatsby"
 import * as store from "store"
-import withMaterialUiRoot from "./withMaterialUiRoot"
 import Pheromones from "../util/pheromones"
 import styled from "styled-components"
 
@@ -30,6 +29,7 @@ import {
   MEDIUM_LARGE_BREAKPOINT,
   SMALL_MEDIUM_BREAKPOINT,
 } from "../util/constants"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 fontAwesomeConfig.autoAddCss = false
 
@@ -169,4 +169,4 @@ class Layout extends React.Component {
   }
 }
 
-export default withMaterialUiRoot(Layout)
+export default withSimpleErrorBoundary(Layout)