Add gatsby-plugin-mdx-frontmatter

gatsby-config.js

@@ -8,6 +8,9 @@ module.exports = {
     twitter: '@zslabs',
   },
   plugins: [
+    {
+      resolve: 'gatsby-plugin-mdx-frontmatter',
+    },
     {
       resolve: 'gatsby-plugin-emotion',
       options: {

gatsby-node.js

@@ -158,34 +158,7 @@ exports.createPages = async ({ actions, graphql }) => {
   })
 }
 
-exports.createSchemaCustomization = ({
-  actions: { createTypes, createFieldExtension },
-  createContentDigest,
-}) => {
-  createFieldExtension({
-    name: 'mdx',
-    extend() {
-      return {
-        type: 'String',
-        resolve(source, args, context, info) {
-          // Grab field
-          const value = source[info.fieldName]
-          // Isolate MDX
-          const mdxType = info.schema.getType('Mdx')
-          // Grab just the body contents of what MDX generates
-          const { resolve } = mdxType.getFields().body
-
-          return resolve({
-            rawBody: value,
-            internal: {
-              contentDigest: createContentDigest(value), // Used for caching
-            },
-          })
-        },
-      }
-    },
-  })
-
+exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
   createTypes(`
     type Mdx implements Node {
       frontmatter: MdxFrontmatter

package.json

@@ -26,22 +26,23 @@
     "create-emotion-server": "10.0.27",
     "eslint-loader": "3.0.3",
     "eslint-plugin-prettier": "3.1.3",
-    "gatsby": "2.21.19",
+    "gatsby": "2.21.33",
     "gatsby-plugin-canonical-urls": "2.3.1",
     "gatsby-plugin-emotion": "4.3.1",
     "gatsby-plugin-feed": "2.5.1",
     "gatsby-plugin-google-analytics": "2.3.1",
-    "gatsby-plugin-manifest": "2.4.2",
-    "gatsby-plugin-mdx": "1.2.6",
+    "gatsby-plugin-manifest": "2.4.3",
+    "gatsby-plugin-mdx": "1.2.7",
+    "gatsby-plugin-mdx-frontmatter": "0.0.2",
     "gatsby-plugin-netlify": "2.3.2",
     "gatsby-plugin-react-helmet": "3.3.1",
-    "gatsby-plugin-sharp": "2.6.2",
+    "gatsby-plugin-sharp": "2.6.3",
     "gatsby-plugin-sitemap": "2.4.2",
     "gatsby-remark-copy-linked-files": "2.3.2",
-    "gatsby-remark-images": "3.3.1",
+    "gatsby-remark-images": "3.3.3",
     "gatsby-remark-relative-source": "0.0.4",
     "gatsby-remark-smartypants": "2.3.1",
-    "gatsby-source-filesystem": "2.3.1",
+    "gatsby-source-filesystem": "2.3.3",
     "gatsby-transformer-sharp": "2.5.2",
     "github-slugger": "1.3.0",
     "mdx-utils": "0.2.0",

src/articles/mdx-frontmatter-in-gatsby.md

@@ -6,6 +6,10 @@ dateModified: '2020-04-12'
 
 import { Alert } from 'chaoskit/src/components'
 
+<Alert type="primary">
+  <p>I've published <a href="https://www.npmjs.com/package/gatsby-plugin-mdx-frontmatter">gatsby-plugin-mdx-frontmatter</a> to help get everyone up and running.</p>
+</Alert>
+
 [MDX](https://mdxjs.com/) is an incredible toolkit that allows you to write [JSX](https://reactjs.org/docs/introducing-jsx.html) in your Markdown files; creating opportunities for more dynamic and interactive experiences in your content. An example of how MDX could be used:
 
 ```mdx
@@ -200,7 +204,3 @@ const Article = ({ frontmatter, body }) => (
   </MDXProvider>
 )
 ```
-
-<Alert type="primary">
-  <p>A reader created <a href="https://github.com/duanecilliers/gatsby-mdx-frontmatter-starter">a Gatsby starter</a> with the concepts from this post to help get everyone up and running. Thanks!</p>
-</Alert>