WIP: upgrade to new Gatsby theme

gatsby-config.js

@@ -10,23 +10,18 @@ module.exports = {
   pathPrefix: "/js-a11y-workshop",
   plugins: [
     {
-      resolve: `@mdx-deck/gatsby-theme`,
+      resolve: `gatsby-theme-mdx-deck`,
       options: {
         // disable gatsby-mdx plugin – use this when your site already uses gatsby-mdx
         mdx: false,
         // source directory for decks
-        path: `src/slides`,
+        contentPath: `src/slides`,
+        basePath: '/slides',
         // name routes' basepath
         name: `slides`,
       },
     },
     `gatsby-plugin-sass`,
-    {
-      resolve: `gatsby-plugin-mdx`,
-      options: {
-        defaultLayouts: { default: path.resolve(`./src/components/layout.js`) },
-      },
-    },
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -56,12 +51,6 @@ module.exports = {
         icon: `src/images/blueicon.jpg`, // This path is relative to the root of the site.
       },
     },
-    {
-      resolve: `gatsby-plugin-compile-es6-packages`,
-      options: {
-        modules: [`@mdx-deck/gatsby-theme`]
-      }
-    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.app/offline
     // `gatsby-plugin-offline`,

package.json

@@ -7,9 +7,6 @@
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
-    "@mdx-deck/gatsby-theme": "^2.5.0",
-    "@mdx-js/mdx": "^1.0.10",
-    "@mdx-js/react": "^1.0.6",
     "autoprefixer": "^9.6.1",
     "downshift": "^3.2.10",
     "emotion": "^10.0.14",
@@ -25,8 +22,8 @@
     "gatsby-plugin-sharp": "^2.2.7",
     "gatsby-remark-prismjs": "^3.3.3",
     "gatsby-source-filesystem": "^2.1.5",
+    "gatsby-theme-mdx-deck": "^3.0.7",
     "gatsby-transformer-sharp": "^2.2.3",
-    "grommet-icons": "^4.2.0",
     "match-sorter": "^4.0.1",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",

src/templates/code-figure.jsx → src/components/site-chrome/code-figure.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 
-import theme from "../slides/theme"
+import theme from "../../theme"
 
 const Figure = styled.figure`
   margin: 0;

src/slides/index.mdx

@@ -2,13 +2,13 @@ import CodeBlock from "../templates/code-figure"
 import Slide from "../templates/slide"
 import ImageSlide from "../templates/image-slide"
 import AccessibleAnimationDemo from "../components/better/animation"
-import highlight from '@mdx-deck/themes/syntax-highlighter-prism'
-// import Appear from "@mdx-deck/components/appear"
+// import highlight from '@mdx-deck/themes/syntax-highlighter-prism'
+// import Appear from "@mdx-deck/src/components/appear"
 import Autocomplete from "../components/better/downshift-autocomplete"
 import Dropdown from "../components/better/dropdown"
 
 import baseTheme from './theme'
-export const themes = [baseTheme, highlight]
+export const theme = baseTheme//, highlight]
 const openModal = () => {
     document.querySelector('.modal-curtain').removeAttribute('hidden')
 }

src/slides/theme.js → src/theme.js

@@ -1,4 +1,4 @@
-import Provider from './counter'
+import Provider from './components/counter'
 
 export default {
   css: {