{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2019/04/09/convert-gatsby-default-blog-to-mdx/","result":{"data":{"mdx":{"id":"2282114a-c23a-53f0-97d1-428d9c05b271","frontmatter":{"title":"Convert the Gatsby default starter blog to use MDX","date":"2019 April 9th","cover":{"id":"3b1f54cc-ffcb-597c-ab8c-4bdd37d09144","publicURL":"/static/cover-831f609547d3755a900a71316271bcef.jpg"}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2019-04-09T00:00:00.000Z\",\n  \"title\": \"Convert the Gatsby default starter blog to use MDX\",\n  \"tags\": [\"information\", \"learning\", \"gatsby\", \"guide\", \"mdx\", \"markdown\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by James Wheeler on Unsplash\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In this guide we\\u2019re going to cover converting the Gatsby default blog\\nstarter to use MDX.\"), mdx(\"p\", null, \"All the cool kids are using Gatsby and MDX in their blogs these days.\\nIf you already have a blog that uses Gatsby but want to move onto the\\nnew hotness then this is the guide for you.\"), mdx(YouTube, {\n    youTubeId: \"gck4RjaX5D4\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"versions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#versions\",\n    \"aria-label\": \"versions permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Versions:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"This guide is being used with the following dependency versions.\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"gatsby: 2.3.5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"react: 16.8.6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"react-dom: 16.8.6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"gatsby-mdx: 0.4.5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"@mdx-js/mdx: 0.20.3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"@mdx-js/tag: 0.20.3\")), mdx(\"p\", null, \"You can also check out the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/lqp6p647q\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"example code\"), \".\"), mdx(\"hr\", null), mdx(\"p\", null, \"We\\u2019re going to need some links, which are:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/docs/importing\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"CodeSandbox docs for importing projects\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/github\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"CodeSandbox import wizard\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/gatsbyjs/gatsby-starter-blog\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Gatsby starter blog\")))), mdx(\"h2\", {\n    \"id\": \"import-to-codesandbox\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#import-to-codesandbox\",\n    \"aria-label\": \"import to codesandbox permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Import to CodeSandbox\"), mdx(\"p\", null, \"For this example I\\u2019m going to be using the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/gatsbyjs/gatsby-starter-blog\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Gatsby starter blog\"), \" and\\nimporting it into CodeSandbox, looking at the docs it says you can do\\nthis with the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/github\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"CodeSandbox import wizard\"), \" linked, paste the link in\\nthere and CodeSandbox will open the representation of the code on\\nGitHub.\"), mdx(\"p\", null, \"Now we can go about moving from using Gatsby transformer remark over\\nto MDX.\"), mdx(\"p\", null, \"Let\\u2019s take a look at what we\\u2019ll be changing for this example. But\\nfirst we\\u2019re going to need to import some dependencies to get MDX\\nrunning in out Gatsby project.\"), mdx(\"p\", null, \"With the add dependency button in CodeSandbox add the following\\ndependencies:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-mdx\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@mdx-js/mdx\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@mdx-js/tag\"))), mdx(\"p\", null, \"We will also need to add dependencies for styled-components so may as\\nwell add them now as well:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-plugin-styled-components\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"styled-components\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"babel-plugin-styled-components\"))), mdx(\"p\", null, \"Files to change:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-node.js\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-config.js\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"index.js\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"blog-post.js\"))), mdx(\"h2\", {\n    \"id\": \"gatsby-nodejs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#gatsby-nodejs\",\n    \"aria-label\": \"gatsby nodejs permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"gatsby-node.js\")), mdx(\"p\", null, \"First up we\\u2019re going to need to change \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \" this is where\\nall the pages and data nodes are generated.\"), mdx(\"p\", null, \"Change all markdown remark occurrences with MDX, that\\u2019s the initial\\nGraphQL query in create pages, then again in the result.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/065d7bd1b9b40a81f16b9e3ff8089337/df438/initialGatsbyNode.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.318766066838045%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'237\\\\'%3e%3cpath%20d=\\\\'M0%20119v118h401V0H0v119m46-55c-3%200-3%203%200%204a739%20739%200%200038-2l-2-2a426%20426%200%2000-36%200m58%20141l-5%201c-3%200-4%201-4%202l21%202c21%200%2022%200%2022-2s0-2-8-2h-5l5-1c5-1%204-1-5-1-7%200-9%201-6%201l4%201h-4l-4-1h-11\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/065d7bd1b9b40a81f16b9e3ff8089337/60a22/initialGatsbyNode.webp 160w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/4c812/initialGatsbyNode.webp 320w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/0ba47/initialGatsbyNode.webp 640w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/e46b2/initialGatsbyNode.webp 960w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/af3f0/initialGatsbyNode.webp 1280w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/75bcc/initialGatsbyNode.webp 1556w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/065d7bd1b9b40a81f16b9e3ff8089337/69538/initialGatsbyNode.png 160w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/72799/initialGatsbyNode.png 320w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/6af66/initialGatsbyNode.png 640w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/d9199/initialGatsbyNode.png 960w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/21b4d/initialGatsbyNode.png 1280w\", \"/static/065d7bd1b9b40a81f16b9e3ff8089337/df438/initialGatsbyNode.png 1556w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/065d7bd1b9b40a81f16b9e3ff8089337/6af66/initialGatsbyNode.png\",\n    \"alt\": \"initial gatsby node changes\",\n    \"title\": \"initial gatsby node changes\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Then change the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"node.internal.type\"), \" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onCreateNode\"), \" from\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MarkdownRemark\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Mdx\"), \".\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1c549094c33aeef4b1176db8800297d1/ce6cc/lastGatsbyNode.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.77176015473888%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'215\\\\'%3e%3cpath%20d=\\\\'M0%20107v108h401V0h-73a635%20635%200%2000-74%201l-89-1a412%20412%200%2000-91%202c0-3-20-3-20%200h-1c0-2-3-2-26-2H0v107M104%206h-5a312%20312%200%2000-6%202c1%202%205%202%205%201h11l14%201c13%200%2014%200%2014-2s-4-2-14-2a102%20102%200%2001-19%200m17%20148l-12%201c-16%200-18%200-17%201l2%202h35l1-2c3-2%200-3-7-3h-7l5%201\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1c549094c33aeef4b1176db8800297d1/60a22/lastGatsbyNode.webp 160w\", \"/static/1c549094c33aeef4b1176db8800297d1/4c812/lastGatsbyNode.webp 320w\", \"/static/1c549094c33aeef4b1176db8800297d1/0ba47/lastGatsbyNode.webp 640w\", \"/static/1c549094c33aeef4b1176db8800297d1/e46b2/lastGatsbyNode.webp 960w\", \"/static/1c549094c33aeef4b1176db8800297d1/af3f0/lastGatsbyNode.webp 1280w\", \"/static/1c549094c33aeef4b1176db8800297d1/5f214/lastGatsbyNode.webp 1551w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1c549094c33aeef4b1176db8800297d1/69538/lastGatsbyNode.png 160w\", \"/static/1c549094c33aeef4b1176db8800297d1/72799/lastGatsbyNode.png 320w\", \"/static/1c549094c33aeef4b1176db8800297d1/6af66/lastGatsbyNode.png 640w\", \"/static/1c549094c33aeef4b1176db8800297d1/d9199/lastGatsbyNode.png 960w\", \"/static/1c549094c33aeef4b1176db8800297d1/21b4d/lastGatsbyNode.png 1280w\", \"/static/1c549094c33aeef4b1176db8800297d1/ce6cc/lastGatsbyNode.png 1551w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/1c549094c33aeef4b1176db8800297d1/6af66/lastGatsbyNode.png\",\n    \"alt\": \"last gatsby node changes\",\n    \"title\": \"last gatsby node changes\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"gatsby-configjs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#gatsby-configjs\",\n    \"aria-label\": \"gatsby configjs permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"gatsby-config.js\")), mdx(\"p\", null, \"Here we\\u2019re going to replace \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-transformer-remark\"), \" with\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-mdx\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1c136a4f96dd20aa322c8933c50bcc81/d1882/gatsbyConfig.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.686299615877076%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'179\\\\'%3e%3cpath%20d=\\\\'M0%2090v89h401V0h-7v14l3-1%203%201c0%202-1%202-3%202l-3%201%202%201c2%200%201%202-1%202h-2v-3c0-2-1-2-2-2l-1-1%201-1v-1c-2%200-2-6%200-6s2-1%202-3V0H0v90m0%200l1%2058v-31h22l22%201-1%202v3h15c14%200%2014%200%2014-2v-2l1%202c1%201%202%202%203%201%204-1%2011-1%2011%201l1-1%202-1c2%200%201-2-1-2h-8l-7-1c-1-1%203-2%206-2h3l6%201c3%200%203%200%201-1l-1-1c2%200%203-2%201-2a162%20162%200%2000-17-1c-2-1%206-2%2012-1%204%200%206%200%205-1l-1-1h1l1-1-9-1-9-2-14-1c-10%200-12%200-11-1l-2%201-2%204c0%202-1%202-22%202H1V55c0-30-1-14-1%2035M79%207l3%201H58c0%202%202%203%209%203h7l2-1%201%201%204%201c3%200%204-1%204-2s0-2%201-1l1-1-2-1h-1c1-1%200-1-3-1-4%200-4%200-2%201m176%200v3c0%202%2014%203%2046%203h18l1-3V7h-65M35%2015c-1%201-1%202%201%202%201%201-3%201-8%201h-9v7h177v-7h-69a1283%201283%200%2000-79%200l-10-1h8l6-1c0-1-1-2-5-2l-4%201-1%201-1-1h-6m180%2092v3h-9l-9%201h9c9%200%209%200%209%203%200%202%200%202-9%202l-9%201h18v3l1%204v-4c0-3%200-3%205-3%204%200%204%200%204%204l1%203v-4c0-2%201-3%207-3%208%200%2010%201%2010%204%200%202%201%202%202%201%204-1%2011-1%2011%201l1-1%202-1%201-1c0-1-6-2-8-1h-2l-4-1h-4l32-1a210%20210%200%200135%201c-1-1%2014-1%2041-1a879%20879%200%200010-1h-33v-5h33c31-1%2029-1-12-1h-46v-3c0-2%200-3-2-3-3%200-3%202-2%204v2l-2-1c1-3-1-3-17-3-17%200-18%200-18%202l-1%202-2-1h1l1-1-6-2-3%201h-1l-4-1h-3l-2-1%201%202%201%202-8%201h-9v-3l-1-3v3c0%203%200%203-4%203-5%200-5%200-5-3l-1-3v3m-59%204l-1%201h-1l1%201c2%200%201%203-1%203-1%201%208%201%2020%201%2019%200%2020%200%205-1-14%200-16%200-16-2l1-2%2016-1c15-1%2015-1-5-1-15%200-20%200-19%201M1%20113v3h44v-2c0-2-1-3-22-3H1v2m242-1h4l3%201h7l3%201-1%201h-1l2%201%201-2c0-1%201-2%207-1a72%2072%200%200110%200h8l7%201c1%202%201%202%201%200%200-1%201-2%206-2l8%201h1l7-1h6a433%20433%200%2000-79%200m-150%202c0%201%201%202%203%202h14c-2-1-2-1%200-1l2%201h6l3%201c1%200%202%200%201-1l-2-1h2c3%201%203%201%203-1l-1-2-1%201h-14l-9-1c-6%200-7%201-7%202m33%200c0%202%201%202%205%202h4l1%201c1-1%204%200%204%201%200%204%200%205%203%205%204%200%205-1%204-3-3-2-1-4%203-4l3-1v-2l-4-1c-2%200-3%201-3%202%200%202%200%202-1%200l-1-2v2c-1%202-1%202-1%200%200-3-2-3-2%200l-2%202v-1l1-2h-13c-1-1-1-1-1%201m-33%205c-2%202%201%203%2014%203l13-1h2l2%201h7c6%200%207-1%207-2l-1-1H93m168%200c-2%202%201%203%2014%203l13-1h2c1%202%203%202%203%201h9l4-1-2-1-1-1h-42\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1c136a4f96dd20aa322c8933c50bcc81/60a22/gatsbyConfig.webp 160w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/4c812/gatsbyConfig.webp 320w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/0ba47/gatsbyConfig.webp 640w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/e46b2/gatsbyConfig.webp 960w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/af3f0/gatsbyConfig.webp 1280w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/3626e/gatsbyConfig.webp 1562w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1c136a4f96dd20aa322c8933c50bcc81/69538/gatsbyConfig.png 160w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/72799/gatsbyConfig.png 320w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/6af66/gatsbyConfig.png 640w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/d9199/gatsbyConfig.png 960w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/21b4d/gatsbyConfig.png 1280w\", \"/static/1c136a4f96dd20aa322c8933c50bcc81/d1882/gatsbyConfig.png 1562w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/1c136a4f96dd20aa322c8933c50bcc81/6af66/gatsbyConfig.png\",\n    \"alt\": \"replace transformer remark with gatsby-mdx\",\n    \"title\": \"replace transformer remark with gatsby-mdx\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"indexjs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#indexjs\",\n    \"aria-label\": \"indexjs permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"index.js\")), mdx(\"p\", null, \"Here we\\u2019re going to alter the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"posts\"), \" variable to take the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Mdx\"), \"\\nedges.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/f02b9/indexPageEdges.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"12.612612612612612%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'50\\\\'%3e%3cpath%20d=\\\\'M0%2025v25h401V0H0v25m283%200h-2l-2%201h-3c-5%201-3%203%202%203%2030%201%2036%200%2038-1v-3c1-1-4-1-10-1l-8%201%204%201h-4l-4-1h-11\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/60a22/indexPageEdges.webp 160w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/4c812/indexPageEdges.webp 320w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/0ba47/indexPageEdges.webp 640w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/e46b2/indexPageEdges.webp 960w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/af3f0/indexPageEdges.webp 1280w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/a3594/indexPageEdges.webp 1554w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/69538/indexPageEdges.png 160w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/72799/indexPageEdges.png 320w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/6af66/indexPageEdges.png 640w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/d9199/indexPageEdges.png 960w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/21b4d/indexPageEdges.png 1280w\", \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/f02b9/indexPageEdges.png 1554w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/bc95b8c0a7eb0228fbb3874c735dcdcb/6af66/indexPageEdges.png\",\n    \"alt\": \"replace all markdown edges\",\n    \"title\": \"replace all markdown edges\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Mdx\"), \" edges are taken from the page query, which is also altered\\nto use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allMdx\"), \" in place of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allMarkdownRemark\"), \".\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/49300d2de7599dae032f131e842e94d9/44d59/indexPageQuery.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"21.44236960721185%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'86\\\\'%3e%3cpath%20d=\\\\'M0%2043v43h43v-2c0-2%200-2%201-1v2a2999%202999%200%2000198-1c0%202%204%202%2079%202h80V0H0v43m235%201l-9%202-2%201c1%202%204%202%205%200h1c0%202%201%202%202%202h2l18%201a99%2099%200%200021-1l4-1h1l1%201%201-2c0-1-1-2-5-1l-5-1c-1-1-34-2-35-1\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/49300d2de7599dae032f131e842e94d9/60a22/indexPageQuery.webp 160w\", \"/static/49300d2de7599dae032f131e842e94d9/4c812/indexPageQuery.webp 320w\", \"/static/49300d2de7599dae032f131e842e94d9/0ba47/indexPageQuery.webp 640w\", \"/static/49300d2de7599dae032f131e842e94d9/e46b2/indexPageQuery.webp 960w\", \"/static/49300d2de7599dae032f131e842e94d9/af3f0/indexPageQuery.webp 1280w\", \"/static/49300d2de7599dae032f131e842e94d9/ba7d2/indexPageQuery.webp 1553w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/49300d2de7599dae032f131e842e94d9/69538/indexPageQuery.png 160w\", \"/static/49300d2de7599dae032f131e842e94d9/72799/indexPageQuery.png 320w\", \"/static/49300d2de7599dae032f131e842e94d9/6af66/indexPageQuery.png 640w\", \"/static/49300d2de7599dae032f131e842e94d9/d9199/indexPageQuery.png 960w\", \"/static/49300d2de7599dae032f131e842e94d9/21b4d/indexPageQuery.png 1280w\", \"/static/49300d2de7599dae032f131e842e94d9/44d59/indexPageQuery.png 1553w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/49300d2de7599dae032f131e842e94d9/6af66/indexPageQuery.png\",\n    \"alt\": \"index page query\",\n    \"title\": \"index page query\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"blog-postjs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#blog-postjs\",\n    \"aria-label\": \"blog postjs permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"blog-post.js\")), mdx(\"p\", null, \"Now last on the list to get MDX working is the blog post template,\\nwe\\u2019re going to need to import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MDXRenderer\"), \" from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-mdx\"), \" we\\u2019re\\ngoing to replace \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dangerouslySetInnerHTML\"), \" with this shortly.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1e773d0c84eb6174f1a186ce8edbad6d/d777c/importMdxRenderer.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"29.903536977491964%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'120\\\\'%3e%3cpath%20d=\\\\'M0%2060v60h401V0H0v60m217-50l1%202c2%200%201%202-1%202s-3%200-3%203v3h179v-7h-43l-42-1c1-2-3-3-6-2v2h5c-1%202-11%202-11%201l2-1c2%200%203%200%202-1%200-2-7-2-6%200%200%202%200%202-10%202-4%200-4%200-4-2V9l-1%202c0%203-4%203-4%200l-1-2v2c0%202%200%202-8%203l-4-1%203-1%205-1c0-1-1-2-6-2-6%201-7%202-5%203%201%201%201%201-1%201-3%200-3%200-2-2%202-2%202-2%200-2l-3%202c0%202-2%202-10%202s-9%200-9-2l-1-2v2l-2%202h-10l2-1c5%200%204-2-1-2h-5M106%2071l-5%202c-1%201-2%201%2019%201%2015%200%2020-1%2017-2-1-1-25-2-31-1\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1e773d0c84eb6174f1a186ce8edbad6d/60a22/importMdxRenderer.webp 160w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/4c812/importMdxRenderer.webp 320w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/0ba47/importMdxRenderer.webp 640w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/e46b2/importMdxRenderer.webp 960w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/af3f0/importMdxRenderer.webp 1280w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/c8370/importMdxRenderer.webp 1555w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1e773d0c84eb6174f1a186ce8edbad6d/69538/importMdxRenderer.png 160w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/72799/importMdxRenderer.png 320w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/6af66/importMdxRenderer.png 640w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/d9199/importMdxRenderer.png 960w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/21b4d/importMdxRenderer.png 1280w\", \"/static/1e773d0c84eb6174f1a186ce8edbad6d/d777c/importMdxRenderer.png 1555w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/1e773d0c84eb6174f1a186ce8edbad6d/6af66/importMdxRenderer.png\",\n    \"alt\": \"MDX renderer\",\n    \"title\": \"MDX renderer\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Here\\u2019s where we use it, we\\u2019ll come onto \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"post.code.body\"), \".\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/01167f5b920acb3d554dd56630739e9b/ce6cc/replaceDangerHtml.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"15.79626047711154%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'63\\\\'%3e%3cpath%20d=\\\\'M0%2032v31h401V0H0v32m109-13c2%200%203%202%201%202l-2-1c0-2-22-1-22%201h-1c0-1-1-2-5-2l-6%201H62l-12%201c-2%202%200%202%2017%202l8%201%202-1a173%20173%200%200131%200l2-1%201%201%201%201c3%200%201-5-2-6-1%200-2%200-1%201m127%200c-3%204-1%205%2016%205%2021%200%2028-1%2028-3s0-2-1-1h-7c-1%200-2%200-1-1%201-2-33-1-35%200m47%202v3h29l31-1v-3c-2-2-6-2-31-2h-29v3\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/01167f5b920acb3d554dd56630739e9b/60a22/replaceDangerHtml.webp 160w\", \"/static/01167f5b920acb3d554dd56630739e9b/4c812/replaceDangerHtml.webp 320w\", \"/static/01167f5b920acb3d554dd56630739e9b/0ba47/replaceDangerHtml.webp 640w\", \"/static/01167f5b920acb3d554dd56630739e9b/e46b2/replaceDangerHtml.webp 960w\", \"/static/01167f5b920acb3d554dd56630739e9b/af3f0/replaceDangerHtml.webp 1280w\", \"/static/01167f5b920acb3d554dd56630739e9b/5f214/replaceDangerHtml.webp 1551w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/01167f5b920acb3d554dd56630739e9b/69538/replaceDangerHtml.png 160w\", \"/static/01167f5b920acb3d554dd56630739e9b/72799/replaceDangerHtml.png 320w\", \"/static/01167f5b920acb3d554dd56630739e9b/6af66/replaceDangerHtml.png 640w\", \"/static/01167f5b920acb3d554dd56630739e9b/d9199/replaceDangerHtml.png 960w\", \"/static/01167f5b920acb3d554dd56630739e9b/21b4d/replaceDangerHtml.png 1280w\", \"/static/01167f5b920acb3d554dd56630739e9b/ce6cc/replaceDangerHtml.png 1551w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/01167f5b920acb3d554dd56630739e9b/6af66/replaceDangerHtml.png\",\n    \"alt\": \"replace dangerously set html\",\n    \"title\": \"replace dangerously set html\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Again in the query we\\u2019re replacing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"markdownRemark\"), \" with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mdx\"), \" and\\nthis time also doing away with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" from the query and adding in\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code\"), \" for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"body\"), \" which we\\u2019re using in our render method.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/62cb54d494980d155946bc8a55242933/61946/blogPostQuery.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"36.869340232858995%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'147\\\\'%3e%3cpath%20d=\\\\'M0%2074v73h3l5-2h2c0%202%208%202%2098%202a1814%201814%200%2000100-1l96%201h97V0H0v74M235%208l-1%202h5l2%201h17l2-1h5l2%201h1l2%201%202-2c0-2-1-2-4-2l-5%201-1-1c0-1-6-1-7%201l-1-1h-19M27%2051c-4%204-1%205%2019%205%2019%200%2020%200%2020-3h1c1%202%2012%202%2012%200s-1-2-5-2H63c-3-3-34-3-36%200m186%201v3h-10l-9%201h9c10%200%2010%200%2010%203%200%202%200%202-2%202s-3-1-3-2l-2-2c-2%200-2%201-2%203l-4%201-5%201%204%201c4%200%205%200%205%202s-1%202-5%202l-4%201%205%201%204%201c-1%201%200%202%201%203h-4l-7%201%205%201c5%200%205%200%205%202-1%202%200%202%202%202s3-3%200-3c-1-1%200-1%203-1%204%200%204%200%204%203l1%204v-7h14v3c0%202%200%203%202%203s2-1%202-3v-3h81a1117%201117%200%20007-2l-72%201v-5h73a1010%201010%200%2000-76-4c0-2%201-2%2073-2a1088%201088%200%20001-2h-74v-5h74a2668%202668%200%200038-1c-35%200-36%200-36-2l-1-2-1%202-2%202c-1%200-2-1-1-2l-1-2-1%202c0%202%200%202-1%201-1-4-2-5-2-2l-1%203-2-2-1-2c-1-1-1%200-1%201%200%202-1%203-2%203l-1-2c1-2-6-3-7-1h-2l-1-1c0-2-2-1-3%201v2c0%202-3%201-3-1s-1-2-3-2l-3%202-2%202c-1%200-2-1-2-3%200-1%200-2-1-1l-1%202-1%202-2-1c0-2-3-3-8-3-4%200-4%201-4%203l-1%201-2-2-1-3-1%203-2%202-2-2c0-2%200-2-1-1h-1l-2-1h-8c0-1-3-1-4%201l-1-1h-1l-1-1c0-2-5-1-7%201s-2%202-1%203%200%201-4%201c-6%200-6%200-6-3l-1-3v3m176%2027l2%202c2%200%202%200%202%207l-1%208v1h1v48h4c3%200%203%200%200-1h-3v-14c0-11%200-13%202-13l1-1-1-2c-2%200-2-1-2-5l1-5%201%204c0%202%200%203%202%203s2-1%202-5c0-5%200-5-3-5h-3V77h3c2-1%201-1-2-1-6%200-6%200-6%203M39%2089l-8%201c0%202%209%202%2011%201h1c0%202-2%202-14%202H15v6h87l90%201c2%200%202%200%202-4v-3h-51c-38%200-50%200-49-1v-3c0-1-1-1-1%201-1%202-1%203-10%203l-10-1%204-1c1%201%202%200%202-1l-2-1h-1l-10%201h-1c1-2-13-2-14%200h-1v-2l-1%203c1%202%200%202-2%202s-3%200-2-1l2-1c1%201%201%200%201-1v-2l-9%201\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/62cb54d494980d155946bc8a55242933/60a22/blogPostQuery.webp 160w\", \"/static/62cb54d494980d155946bc8a55242933/4c812/blogPostQuery.webp 320w\", \"/static/62cb54d494980d155946bc8a55242933/0ba47/blogPostQuery.webp 640w\", \"/static/62cb54d494980d155946bc8a55242933/e46b2/blogPostQuery.webp 960w\", \"/static/62cb54d494980d155946bc8a55242933/af3f0/blogPostQuery.webp 1280w\", \"/static/62cb54d494980d155946bc8a55242933/87ef7/blogPostQuery.webp 1546w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/62cb54d494980d155946bc8a55242933/69538/blogPostQuery.png 160w\", \"/static/62cb54d494980d155946bc8a55242933/72799/blogPostQuery.png 320w\", \"/static/62cb54d494980d155946bc8a55242933/6af66/blogPostQuery.png 640w\", \"/static/62cb54d494980d155946bc8a55242933/d9199/blogPostQuery.png 960w\", \"/static/62cb54d494980d155946bc8a55242933/21b4d/blogPostQuery.png 1280w\", \"/static/62cb54d494980d155946bc8a55242933/61946/blogPostQuery.png 1546w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/62cb54d494980d155946bc8a55242933/6af66/blogPostQuery.png\",\n    \"alt\": \"blogPostQuery\",\n    \"title\": \"blogPostQuery\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"now-were-using-mdx\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#now-were-using-mdx\",\n    \"aria-label\": \"now were using mdx permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Now we\\u2019re using MDX!\"), mdx(\"p\", null, \"So now we can create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" post, let\\u2019s do that.\"), mdx(\"p\", null, \"Import the styled-components dependencies:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"gatsby-plugin-styled-components\\nstyled-components\\nbabel-plugin-styled-components\\n\")), mdx(\"p\", null, \"Then configure them in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js:title=gatsby-config.js\"\n  }), \"module.exports = {\\n  siteMetadata: {\\n    title: `Gatsby Starter Blog`,\\n    ...\\n    },\\n  },\\n  plugins: [\\n    `gatsby-plugin-styled-components`,\\n    {\\n      resolve: `gatsby-source-filesystem`,\\n      options: {\\n  ...\\n\")), mdx(\"p\", null, \"Now we can use styled-components, in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components\"), \" make a new\\ncomponent, I have called my one \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"butt.js\"), \" call yours what you like.\"), mdx(\"p\", null, \"We\\u2019re going to use this component in a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" document, first the\\ncomponent:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import styled from 'styled-components';\\n\\nexport const Butt = styled.button`\\n  background-color: red;\\n  height: 40px;\\n  width: 80px;\\n`;\\n\")), mdx(\"p\", null, \"Spicy, right! \\uD83C\\uDF36\"), mdx(\"p\", null, \"Now we can include this component in a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" document so let\\u2019s go\\nahead and create that, in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"content/blog\"), \" make a new directory, I\\u2019m\\ngiving mine the imaginative name \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"first-mdx-post\"), \", in there create a\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.mdx\"), \" file and use the frontmatter from one of the other posts\\nas an example of what to use:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-mdx\"\n  }), \"---\\ntitle: My First MDX Post!\\ndate: '2019-04-07T23:46:37.121Z'\\n---\\n\\n# make a site they said, it'll be fun they said\\n\\nmore content yo!\\n\")), mdx(\"p\", null, \"This will render a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h1\"), \" and a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \" and we should see it render in our\\nCodeSandbox preview.\"), mdx(\"p\", null, \"Now we can go ahead and import our beautifully crafted button:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-mdx\"\n  }), \"---\\ntitle: My First MDX Post!\\ndate: '2019-04-07T23:46:37.121Z'\\n---\\n\\nimport { Butt } from '../../../src/components/button';\\n\\n# make a site they said, it'll be fun they said\\n\\nmore content yo!\\n\\n<Butt>yoyoyo</Butt>\\n\")), mdx(\"h2\", {\n    \"id\": \"wrap-up\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#wrap-up\",\n    \"aria-label\": \"wrap up permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Wrap up!\"), mdx(\"p\", null, \"So, that\\u2019s it, we\\u2019ve gone and converted the Gatsby starter blog from\\nusing Markdown Remark over to using MDX.\"), mdx(\"p\", null, \"I hope you have found it helpful.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Thanks for reading\"), \" \\uD83D\\uDE4F\"), mdx(\"p\", null, \"Please take a look at my other content if you enjoyed this.\"), mdx(\"p\", null, \"Follow me on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/spences10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/ama\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ask Me Anything\"), \" on GitHub.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"In this guide we're going to cover converting the Gatsby default blog\nstarter to use MDX. All the cool kids are using Gatsby and MDX in…","tableOfContents":{"items":[{"url":"#versions","title":"Versions:"},{"url":"#import-to-codesandbox","title":"Import to CodeSandbox"},{"url":"#gatsby-nodejs","title":"gatsby-node.js"},{"url":"#gatsby-configjs","title":"gatsby-config.js"},{"url":"#indexjs","title":"index.js"},{"url":"#blog-postjs","title":"blog-post.js"},{"url":"#now-were-using-mdx","title":"Now we're using MDX!"},{"url":"#wrap-up","title":"Wrap up!"}]},"timeToRead":2,"fields":{"slug":"/2019/04/09/convert-gatsby-default-blog-to-mdx/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2019/04/09/convert-gatsby-default-blog-to-mdx/index.mdx"}}},"pageContext":{"slug":"/2019/04/09/convert-gatsby-default-blog-to-mdx/","previous":{"id":"790fc137-bd43-5f5d-bc6d-3152575edfad","excerpt":"Already use WSL with Ubuntu? Want an Upgrade?? This is a guide that will cover upgrading Windows Subsystem Linux\n(WSL) from the current LTS version to the latest 'normal' version\n18.10. I found this post on  dev.to  this weekend detailing going from…","frontmatter":{"title":"Update Windows Subsystem Linux Ubuntu from 18.04 to 18.10","date":"2019-04-01T00:00:00.000Z"},"fields":{"slug":"/2019/04/01/update-wsl-from-18.04-18.10/"}},"next":{"id":"455088b1-8655-5b0b-90bb-8a8f5f4afbc3","excerpt":"I've been wanting to go to a JAMstack conf since the first one was\nscheduled for October 2018. This year when it was announced there\nwould be one in London I was super excited to get the opportunity to\ngo. The conference was across two days with the…","frontmatter":{"title":"JAMstack_conf London 2019","date":"2019-07-19T00:00:00.000Z"},"fields":{"slug":"/2019/07/19/jamstack-london-2019/"}}}}}