{"data":{"mdx":{"code":{"body":"function _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\nconst layoutProps = {};\nreturn class MDXContent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.layout = null;\n  }\n\n  render() {\n    const _this$props = this.props,\n          {\n      components\n    } = _this$props,\n          props = _objectWithoutProperties(_this$props, [\"components\"]);\n\n    return React.createElement(MDXTag, {\n      name: \"wrapper\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `This is an example of how you can build your site around Markdown files.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Images referenced in Markdown are copied to the generated site, like these kittens:`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"p\",\n      props: {\n        \"className\": \"gatsby-resp-image-link\",\n        \"href\": \"/static/d49ad52d23565c90cedcf94cbed94ce0/2a887/kittens.jpg\",\n        \"style\": {\n          \"display\": \"block\"\n        },\n        \"target\": \"_blank\",\n        \"rel\": [\"noopener\"]\n      }\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"className\": \"gatsby-resp-image-wrapper\",\n        \"style\": {\n          \"position\": \"relative\",\n          \"display\": \"block\",\n          \"maxWidth\": \"737px\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\"\n        }\n      }\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"span\",\n      props: {\n        \"className\": \"gatsby-resp-image-background-image\",\n        \"style\": {\n          \"paddingBottom\": \"75%\",\n          \"position\": \"relative\",\n          \"bottom\": \"0px\",\n          \"left\": \"0px\",\n          \"backgroundSize\": \"cover\",\n          \"display\": \"block\"\n        }\n      }\n    }), `\n    `, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"span\",\n      props: {\n        \"className\": \"gatsby-resp-image-image\",\n        \"style\": {\n          \"width\": \"100%\",\n          \"height\": \"100%\",\n          \"margin\": \"0px\",\n          \"verticalAlign\": \"middle\",\n          \"position\": \"absolute\",\n          \"top\": \"0px\",\n          \"left\": \"0px\",\n          \"boxShadow\": \"inset 0px 0px 0px 400px white\"\n        },\n        \"alt\": \"Kittens\",\n        \"title\": \"\",\n        \"src\": \"/static/d49ad52d23565c90cedcf94cbed94ce0/2a887/kittens.jpg\",\n        \"srcSet\": [\"/static/d49ad52d23565c90cedcf94cbed94ce0/c3410/kittens.jpg 300w\", \"/static/d49ad52d23565c90cedcf94cbed94ce0/59c7e/kittens.jpg 600w\", \"/static/d49ad52d23565c90cedcf94cbed94ce0/2a887/kittens.jpg 1024w\"],\n        \"sizes\": \"(max-width: 737px) 100vw, 737px\"\n      }\n    }), `\n  `), `\n  `)), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Finally, here’s some sample code with beautiful syntax highlighting thanks to PrismJS:`), React.createElement(MDXTag, {\n      name: \"div\",\n      components: components,\n      props: {\n        \"className\": \"gatsby-highlight\",\n        \"data-language\": \"typescript\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"pre\",\n      components: components,\n      parentName: \"div\",\n      props: {\n        \"className\": \"language-typescript\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"code\",\n      components: components,\n      parentName: \"pre\",\n      props: {\n        \"className\": \"language-typescript\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token keyword\"\n      }\n    }, `function`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token function\"\n      }\n    }, `greeting`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `(`), `name`, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `:`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token builtin\"\n      }\n    }, `string`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `)`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `:`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token builtin\"\n      }\n    }, `string`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `{`), `\n  `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token keyword\"\n      }\n    }, `return`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token string\"\n      }\n    }, `'Hello, '`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token operator\"\n      }\n    }, `+`), ` name `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token operator\"\n      }\n    }, `+`), ` `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token string\"\n      }\n    }, `'!'`), `\n`, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `}`), `\n\n`, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token builtin\"\n      }\n    }, `console`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `.`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token function\"\n      }\n    }, `log`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `(`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token function\"\n      }\n    }, `greeting`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `(`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token string\"\n      }\n    }, `'GatsbyJS'`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `)`), React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"code\",\n      props: {\n        \"className\": \"token punctuation\"\n      }\n    }, `)`)))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Go back to the `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"p\",\n      props: {\n        \"href\": \"/all\"\n      }\n    }, `content index`), `.`));\n  }\n\n}\nMDXContent.isMDXComponent = true;"},"frontmatter":{"date":"January 7, 2018","path":"/content/kittens/","title":"Kittens"}}},"pageContext":{}}