{
    "componentChunkName": "component---node-modules-lekoarts-gatsby-theme-minimal-blog-core-src-templates-post-query-tsx",
    "path": "/fantastic-beasts-and-where-to-find-them",
    "result": {"data":{"post":{"slug":"/fantastic-beasts-and-where-to-find-them","title":"Fantastic Beasts and Where to Find Them","date":"01.11.2019","tags":[{"name":"Novel","slug":"novel"}],"description":null,"canonicalUrl":null,"body":"var _excluded = [\"components\"];\n\nfunction _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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Fantastic Beasts and Where to Find Them\",\n  \"date\": \"2019-11-01T00:00:00.000Z\",\n  \"tags\": [\"Novel\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Here will a React component go:\"), mdx(SpotifyPlayer, {\n    uri: \"spotify:user:bbcamerica:playlist:3w18u69NplCpXVG4fQG726\",\n    size: \"large\",\n    theme: \"black\",\n    view: \"list\",\n    mdxType: \"SpotifyPlayer\"\n  }), mdx(\"p\", null, \"Here will a live code example go:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"react-live\",\n    \"react-live\": true\n  }, \"const onClick = () => {\\n  alert(\\\"You opened me\\\");\\n};\\nrender(<button onClick={onClick}>Alohomora!</button>);\\n\")), mdx(\"p\", null, \"Here will a normal code block go:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"(function() {\\n\\nvar cache = {};\\nvar form = $('form');\\nvar minified = true;\\n\\nvar dependencies = {};\\n\\nvar treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';\\nvar treePromise = new Promise(function(resolve) {\\n    $u.xhr({\\n        url: treeURL,\\n        callback: function(xhr) {\\n            if (xhr.status < 400) {\\n                resolve(JSON.parse(xhr.responseText).tree);\\n            }\\n        }\\n    });\\n});\\n\")), mdx(\"p\", null, \"A code block with a JSDoc comment, short, and long comment:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"/**\\n * Get value out of string (e.g. rem => px)\\n * If value is px strip the px part\\n * If the input is already a number only return that value\\n * @param {string | number} input\\n * @param {number} [rootFontSize]\\n * @return {number} Number without last three characters\\n * @example removeLastThree('6rem') => 6\\n */\\nconst getValue = (input, rootFontSize = 16) => {\\n  if (typeof input === `number`) {\\n    return input / rootFontSize;\\n  }\\n\\n  const isPxValue = input.slice(-2) === `px`;\\n\\n  if (isPxValue) {\\n    return parseFloat(input.slice(0, -2));\\n  }\\n\\n  return parseFloat(input.slice(0, -3));\\n};\\n\\n// This is a little helper function\\nconst helper = (a, b) => a + b;\\n\\n// This is also a little helper function but this time with a really long one-line comment that should show some more details\\nconst morehelper = (a, b) => a * b;\\n\\nexport { getValue, helper, morehelper };\\n\")), mdx(\"p\", null, \"Normal block without language:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"import Test from \\\"../components/test\\\"\\n\\nconst Layout = ({ children }) => (\\n  <Test>\\n    {children}\\n  </Test>\\n)\\n\\nexport default Layout\\n\")), mdx(\"p\", null, \"Code block with code highlighting:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx:title=src/components/post.jsx\",\n    \"metastring\": \"{5-7,10}\",\n    \"{5-7,10}\": true\n  }, \"import * as React from \\\"react\\\";\\n\\nconst Post = ({ data: { post } }) => (\\n  <Layout>\\n    <Heading variant=\\\"h2\\\" as=\\\"h2\\\">\\n      {post.title}\\n    </Heading>\\n    <p\\n      sx={{\\n        color: `secondary`,\\n        mt: 3,\\n        a: { color: `secondary` },\\n        fontSize: [1, 1, 2],\\n      }}\\n    >\\n      <span>{post.date}</span>\\n      {post.tags && (\\n        <React.Fragment>\\n          {` \\u2014 `}\\n          <ItemTags tags={post.tags} />\\n        </React.Fragment>\\n      )}\\n    </p>\\n    <section\\n      sx={{\\n        ...CodeStyles,\\n        my: 5,\\n        \\\".gatsby-resp-image-wrapper\\\": { my: 5, boxShadow: `lg` },\\n      }}\\n    >\\n      <MDXRenderer>{post.body}</MDXRenderer>\\n    </section>\\n  </Layout>\\n);\\n\\nexport default Post;\\n\")), mdx(\"p\", null, \"Code block without title:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"Harry Potter and the Philosopher's Stone\\n\")), mdx(\"p\", null, \"Code block without lineNumbers (but lang):\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\",\n    \"metastring\": \"noLineNumbers\",\n    \"noLineNumbers\": true\n  }, \"Harry Potter and the Chamber of Secrets\\n\")), mdx(\"p\", null, \"Code block without lineNumbers (and without lang):\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-noLineNumbers\"\n  }, \"Harry Potter and the Chamber of Secrets\\n\")), mdx(\"p\", null, \"Code block with only the title:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-:title=src/utils/scream.js\"\n  }, \"const scream = (input) => window.alert(input)\\n\")), mdx(\"p\", null, \"Code block with only the title but without lineNumbers:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-:title=src/utils/scream.js\",\n    \"metastring\": \"noLineNumbers\",\n    \"noLineNumbers\": true\n  }, \"const scream = (input) => window.alert(input)\\n\")), mdx(\"p\", null, \"Line highlighting without code title:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"{2,4-5}\",\n    \"{2,4-5}\": true\n  }, \"const test = 3;\\nconst foo = \\\"bar\\\";\\nconst harry = \\\"potter\\\";\\nconst hermione = \\\"granger\\\";\\nconst ron = \\\"weasley\\\";\\n\")), mdx(\"p\", null, \"Here will \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"inline code\"), \" go, just inside the text. Wow!\"), mdx(\"p\", null, \"Code block without line numbers but with highlighting, language, and title:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx:title=src/components/blog.tsx\",\n    \"metastring\": \"{7-9,16} noLineNumbers\",\n    \"{7-9,16}\": true,\n    \"noLineNumbers\": true\n  }, \"import * as React from \\\"react\\\";\\n\\nconst Blog = ({ posts }: PostsProps) => {\\n  const { tagsPath, basePath } = useSiteMetadata();\\n\\n  return (\\n    <Layout>\\n      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>\\n        <Heading variant=\\\"h2\\\" as=\\\"h2\\\">\\n          Blog\\n        </Heading>\\n        <Styled.a\\n          as={Link}\\n          sx={{ variant: `links.secondary` }}\\n          to={`/${basePath}/${tagsPath}`.replace(/\\\\/\\\\/+/g, `/`)}\\n        >\\n          View all tags\\n        </Styled.a>\\n      </Flex>\\n      <Listing posts={posts} sx={{ mt: [4, 5] }} />\\n    </Layout>\\n  );\\n};\\n\\nexport default Blog;\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Here will a React component go: Here will a live code example go: Here will a normal code block go: A code block with a JSDoc comment, short…","timeToRead":1,"banner":null}},"pageContext":{"slug":"/fantastic-beasts-and-where-to-find-them","formatString":"DD.MM.YYYY"}},
    "staticQueryHashes": ["2744905544","3090400250","318001574"]}