{"componentChunkName":"component---src-templates-blog-js","path":"/blog/code-test","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Code test","date":"September 9th, 2020"},"html":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">\"react\"</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Helmet <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">\"react-helmet\"</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Link<span class=\"token punctuation\">,</span> graphql<span class=\"token punctuation\">,</span> useStaticQuery <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">\"gatsby\"</span>\n\n<span class=\"token keyword\">import</span> Layout <span class=\"token keyword\">from</span> <span class=\"token string\">\"../components/layout\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> blogStyles <span class=\"token keyword\">from</span> <span class=\"token string\">'./blog.module.scss'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">BlogPage</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token function\">useStaticQuery</span><span class=\"token punctuation\">(</span>graphql<span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    query {\n      allMarkdownRemark {\n        edges {\n          node {\n            frontmatter {\n              title\n              date\n            }\n            fields {\n              slug\n            }\n          }\n        }\n      }\n    }\n  </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token operator\">&lt;</span>Layout<span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>Helmet<span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>meta charSet<span class=\"token operator\">=</span><span class=\"token string\">\"utf-8\"</span> <span class=\"token operator\">/</span><span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>html lang<span class=\"token operator\">=</span><span class=\"token string\">\"en\"</span> <span class=\"token operator\">/</span><span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>title<span class=\"token operator\">></span>Blog <span class=\"token operator\">|</span> Matt Chan<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>title<span class=\"token operator\">></span>\n        <span class=\"token operator\">&lt;</span>meta\n          name<span class=\"token operator\">=</span><span class=\"token string\">\"description\"</span>\n          content<span class=\"token operator\">=</span><span class=\"token string\">\"The blog page of prospective developer Matt Chan's web blog.\"</span>\n        <span class=\"token operator\">></span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>meta<span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Helmet<span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>h1<span class=\"token operator\">></span>Blog<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>ol className<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>blogStyles<span class=\"token punctuation\">.</span>posts<span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n        <span class=\"token punctuation\">{</span>data<span class=\"token punctuation\">.</span>allMarkdownRemark<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n          <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n            <span class=\"token operator\">&lt;</span>li className<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>blogStyles<span class=\"token punctuation\">.</span>post<span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n              <span class=\"token operator\">&lt;</span>Link to<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">/blog/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>edge<span class=\"token punctuation\">.</span>node<span class=\"token punctuation\">.</span>fields<span class=\"token punctuation\">.</span>slug<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">}</span><span class=\"token operator\">></span>\n                <span class=\"token operator\">&lt;</span>h2<span class=\"token operator\">></span><span class=\"token punctuation\">{</span>edge<span class=\"token punctuation\">.</span>node<span class=\"token punctuation\">.</span>frontmatter<span class=\"token punctuation\">.</span>title<span class=\"token punctuation\">}</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>h2<span class=\"token operator\">></span>\n                <span class=\"token operator\">&lt;</span>p<span class=\"token operator\">></span><span class=\"token punctuation\">{</span>edge<span class=\"token punctuation\">.</span>node<span class=\"token punctuation\">.</span>frontmatter<span class=\"token punctuation\">.</span>date<span class=\"token punctuation\">}</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span>\n              <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Link<span class=\"token operator\">></span>\n            <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>li<span class=\"token operator\">></span>\n          <span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span>\n      <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>ol<span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>p<span class=\"token operator\">></span>Posts <span class=\"token function\">will</span> <span class=\"token punctuation\">(</span>eventually<span class=\"token punctuation\">)</span> show up here<span class=\"token punctuation\">.</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Layout<span class=\"token operator\">></span>\n  <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> BlogPage<span class=\"token punctuation\">;</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>"}},"pageContext":{"slug":"code-test"}},"staticQueryHashes":["3159585216","440568431"]}