{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/example/","result":{"data":{"site":{"siteMetadata":{"title":"Gatsby Starter Personal Blog","author":"Gatsby"}},"mdx":{"id":"bff316c4-da0d-5555-a2f2-b5725fa9c9f0","excerpt":"This is a post showing MDX in action. This starter now comes with MDX out-of-the-box! Custom components You can also import custom React components locally…","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  \"title\": \"MDX!\",\n  \"date\": \"2019-10-22\",\n  \"description\": \"A post showing MDX in action\"\n};\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, \"This is a post showing MDX in action. This starter now comes with MDX out-of-the-box!\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"jsx\",\n    \"data-index\": \"0\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"grvsc-code\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk3\"\n  }), \"// you can write JSX in your Markdown!\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk4\"\n  }), \"button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \">\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"test\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk4\"\n  }), \"button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \">\")))), mdx(\"button\", null, \"test\"), mdx(\"h2\", null, \"Custom components\"), mdx(\"p\", null, \"You can also import custom React components locally. Make sure \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/plugins/gatsby-plugin-root-import/\"\n  }), \"gatsby-plugin-root-import\"), \" as relative paths will not work.\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"jsx\",\n    \"data-index\": \"1\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"grvsc-code\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk3\"\n  }), \"// Import custom component\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk15\"\n  }), \"import\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \" \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk12\"\n  }), \"Button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \" \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk15\"\n  }), \"from\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \" \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk8\"\n  }), \"\\\"src/components/button\\\"\")))), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"jsx\",\n    \"data-index\": \"2\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"grvsc-code\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"grvsc-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk10\"\n  }), \"Button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \">\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk1\"\n  }), \"Test\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk10\"\n  }), \"Button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"mtk17\"\n  }), \">\")))), mdx(Button, {\n    mdxType: \"Button\"\n  }, \"Test\"), mdx(\"h2\", null, \"MDX\"), mdx(\"p\", null, \"MDX lets you write JSX embedded inside markdown, perfect for technical blogs. MDX works with Gatsby through \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/\"\n  }), \"gatsby-plugin-mdx\"), \". You can learn more about it in the Gatsby docs: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/docs/mdx/getting-started/\"\n  }), \"Getting Started with MDX\"), \".\"), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n  }\\n  \\n  .grvsc-code {\\n    display: inline-block;\\n    min-width: 100%;\\n  }\\n  \\n  .grvsc-line {\\n    display: inline-block;\\n    box-sizing: border-box;\\n    width: 100%;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-line-highlighted {\\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\\n  }\\n  \\n  .default-dark {\\n    background-color: #1E1E1E;\\n    color: #D4D4D4;\\n  }\\n  .default-dark .mtk3 { color: #6A9955; }\\n  .default-dark .mtk17 { color: #808080; }\\n  .default-dark .mtk4 { color: #569CD6; }\\n  .default-dark .mtk1 { color: #D4D4D4; }\\n  .default-dark .mtk15 { color: #C586C0; }\\n  .default-dark .mtk12 { color: #9CDCFE; }\\n  .default-dark .mtk8 { color: #CE9178; }\\n  .default-dark .mtk10 { color: #4EC9B0; }\\n\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"MDX!","date":"October 22, 2019","description":"A post showing MDX in action"}}},"pageContext":{"slug":"/example/","previous":{"fields":{"slug":"/hi-folks/"},"frontmatter":{"title":"New Beginnings"}},"next":{"fields":{"slug":"/awesome-images/"},"frontmatter":{"title":"Awesome Images (edited)"}}}},"staticQueryHashes":["3663586608","63159454"]}