Add custom MDX configuration to Core

@westegg/gatsby-theme-core/gatsby-config.js

@@ -65,12 +65,29 @@ module.exports = options => {
    */
   if (mdx && Object.keys(mdxLayouts).length > 0) {
     plugins.push({
-      resolve: 'gatsby-mdx',
+      resolve: 'gatsby-plugin-mdx',
       options: {
         extensions: [`.md`, `.mdx`],
         defaultLayouts: {
           ...mdxLayouts
-        }
+        },
+        gatsbyRemarkPlugins: [
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 2048
+            }
+          }
+        ],
+        rehypePlugins: [
+          require('rehype-autolink-headings'),
+          require('rehype-highlight'),
+          require('rehype-slug'),
+          require('rehype-toc')
+        ]
       }
     })
   }

@westegg/gatsby-theme-core/package.json

@@ -16,15 +16,14 @@
   "dependencies": {
     "@emotion/core": "10.0.16",
     "@emotion/styled": "10.0.15",
-    "@mdx-js/mdx": "1.1.0",
-    "@mdx-js/react": "1.0.27",
+    "@mdx-js/mdx": "1.1.5",
+    "@mdx-js/react": "1.1.5",
     "@mdx-js/tag": "0.20.3",
     "fs-extra": "8.1.0",
     "gatsby": "2.13.67",
     "gatsby-image": "2.2.8",
-    "gatsby-mdx": "0.6.3",
     "gatsby-plugin-google-analytics": "2.1.7",
-    "gatsby-plugin-mdx": "1.0.24",
+    "gatsby-plugin-mdx": "1.0.22",
     "gatsby-plugin-netlify": "2.1.5",
     "gatsby-plugin-netlify-cms": "4.1.7",
     "gatsby-plugin-offline": "2.2.6",
@@ -43,6 +42,10 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-helmet": "6.0.0-beta",
+    "rehype-autolink-headings": "^2.0.5",
+    "rehype-highlight": "^3.0.0",
+    "rehype-slug": "^2.0.3",
+    "rehype-toc": "^2.2.1",
     "styled-system": "5.1.0",
     "theme-ui": "0.2.35"
   },

@westegg/gatsby-theme-digital-garden/gatsby-config.js

@@ -12,7 +12,8 @@ module.exports = options => {
         }
       ]
     },
-    mdx = true,
+    // TODO: Turn to true once it works to use MDX from @westegg/gatsby-theme-core
+    mdx = false,
     mdxLayouts = {},
     notes = 'notes',
     notesPath = '/notes',
@@ -29,11 +30,20 @@ module.exports = options => {
   /**
    * Gatsby Themes
    */
+  mdx &&
+    plugins.push({
+      resolve: '@westegg/gatsby-theme-core',
+      options: {
+        mdx,
+        mdxLayouts
+      }
+    })
+
   plugins.push({
     resolve: 'gatsby-theme-digital-garden',
     options: {
       header,
-      mdx,
+      mdx: !mdx,
       mdxLayouts,
       notes,
       notesPath

@westegg/gatsby-theme-digital-garden/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^16.9.0"
   },
   "dependencies": {
+    "@westegg/gatsby-theme-core": "*",
     "gatsby": "2.13.67",
     "gatsby-theme-digital-garden": "0.2.3",
     "gatsby-theme-digital-garden-blog": "0.2.3",

@westegg/gatsby-theme-digital-garden/src/components/layout.js

@@ -0,0 +1,3 @@
+import layout from 'gatsby-theme-digital-garden/src/components/layout'
+
+export default layout

@westegg/gatsby-theme-misk/gatsby-config.js

@@ -13,7 +13,7 @@ module.exports = options => {
         }
       ]
     },
-    mdx = true,
+    mdx = false,
     mdxLayouts = {},
     notes = 'notes',
     notesPath = '/notes',

starters/westegg-core/gatsby-browser.js

@@ -0,0 +1 @@
+import './src/styles/highlight.js.css'

starters/westegg-core/src/pages/index.mdx

@@ -1 +1,18 @@
 # Hello World from MDX!
+
+Lorem ipsum
+
+## Test Header 2
+
+Lorem ipsum
+
+### Test Header 3
+
+Lorem ipsum
+
+# Code Highlighting Test
+
+```js
+var name = 'World'
+console.warn('Hello, ' + name + '!')
+```

starters/westegg-core/src/styles/highlight.js.css

@@ -0,0 +1,66 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #f0f0f0;
+}
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+.hljs-comment {
+  color: #888888;
+}
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #bc6060;
+}
+.hljs-literal {
+  color: #78a960;
+}
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #397300;
+}
+.hljs-meta {
+  color: #1f7199;
+}
+.hljs-meta-string {
+  color: #4d99bf;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: bold;
+}

starters/westegg-digital-garden/gatsby-config.js

@@ -4,7 +4,13 @@ module.exports = {
   },
   plugins: [
     {
-      resolve: '@westegg/gatsby-theme-core'
+      resolve: '@westegg/gatsby-theme-core',
+      mdx: true,
+      mdxLayouts: {
+        default: require.resolve(
+          '@westegg/gatsby-theme-digital-garden/src/components/layout'
+        )
+      }
     },
     {
       resolve: '@westegg/gatsby-theme-digital-garden',