{"version":3,"sources":["webpack:///./src/templates/blog-post.tsx"],"names":["BlogPostListRow","loadable","a","BlogPostTemplate","data","mdx","Error","postUrl","site","siteMetadata","siteUrl","toBlogPostLink","fields","slug","post","toDetailBlogPost","relatedArticle","pipe","toBlogPostList","filterDraftPostList","allMdx","edges","filter","e","className","bio","toc","headings","commonSidebar","length","blogPosts"],"mappings":"oPAcMA,EAAkBC,YAAQ,sBAAC,8BAAAC,EAAA,sEACG,wDADH,uBACvBF,EADuB,EACvBA,gBADuB,kBAIxBA,GAJwB,4CA0DlBG,UA3C4C,SAAC,GAE/B,UAD3BC,EAC2B,EAD3BA,KAEMC,EAAMD,EAAKC,IACjB,IAAKA,EACH,MAAMC,MAGR,IACMC,IADU,UAAAH,EAAKI,YAAL,mBAAWC,oBAAX,eAAyBC,UAAzB,oBACUC,aAAeN,SAAA,UAAAA,EAAKO,cAAL,eAAaC,OAAb,IAEnCC,EAAOC,YAAiBR,EAASF,GAEjCW,EAAiBC,YACrBC,IACAC,IAFqBF,CAGrBb,EAAKgB,OAAOC,MAAMC,QAAO,SAACC,GAAD,YAAqB,IAAOA,MAEvD,OACE,wBAAC,IAAD,KACE,+BAAKC,UAAU,yBACZ,IAAOV,EACN,gDACE,wBAAC,IAAD,CAAMA,KAAMA,IAEZ,wBAAC,IAAD,CACEW,KAAK,EACLC,IAAK,CAAEC,SAAUb,EAAKa,UACtBC,eAAe,KAInB,qCAIuB,IAA1BZ,EAAea,OACd,wBAAC7B,EAAD,CAAiB8B,UAAWd,IAC1B","file":"component---src-templates-blog-post-tsx-67aa26bc96c610e19740.js","sourcesContent":["import React from \"react\"\nimport { graphql, PageProps } from \"gatsby\"\nimport loadable from \"loadable-components\"\nimport { pipe } from \"ramda\"\n\nimport type { BlogPostBySlugQuery, MdxEdge } from \"@graphql-types\"\nimport type { AroundNav } from \"types/external-graphql-types\"\nimport { toDetailBlogPost, toBlogPostList } from \"~/service/gateways/post\"\nimport { filterDraftPostList } from \"~/service/presenters/post\"\nimport { toBlogPostLink } from \"~/service/presenters/links\"\nimport { Post } from \"~/components/common/post\"\nimport { Layout } from \"~/components/layout\"\nimport { Sidebar } from \"~/components/sidebar\"\n\nconst BlogPostListRow = loadable(async () => {\n  const { BlogPostListRow } = await import(\n    `../components/common/blog-post-list-row`\n  )\n  return BlogPostListRow\n})\n\ninterface BlogPostTemplateProps extends PageProps {\n  data: BlogPostBySlugQuery\n  pageContext: {\n    previous: AroundNav | null\n    next: AroundNav | null\n  }\n}\n\nconst BlogPostTemplate: React.VFC<BlogPostTemplateProps> = ({\n  data,\n}: BlogPostTemplateProps) => {\n  const mdx = data.mdx\n  if (!mdx) {\n    throw Error\n  }\n\n  const siteUrl = data.site?.siteMetadata?.siteUrl || `http://127.0.0.1`\n  const postUrl = siteUrl + toBlogPostLink(mdx?.fields?.slug || ``)\n\n  const post = toDetailBlogPost(postUrl, mdx)\n\n  const relatedArticle = pipe(\n    toBlogPostList,\n    filterDraftPostList\n  )(data.allMdx.edges.filter((e): e is MdxEdge => typeof e !== `undefined`))\n\n  return (\n    <Layout>\n      <div className=\"l-page-container\">\n        {typeof post !== `undefined` ? (\n          <>\n            <Post post={post} />\n\n            <Sidebar\n              bio={true}\n              toc={{ headings: post.headings }}\n              commonSidebar={true}\n            />\n          </>\n        ) : (\n          <div />\n        )}\n      </div>\n\n      {relatedArticle.length !== 0 ? (\n        <BlogPostListRow blogPosts={relatedArticle} />\n      ) : null}\n    </Layout>\n  )\n}\n\nexport default BlogPostTemplate\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug($slug: String!, $category: String!) {\n    mdx(fields: { slug: { eq: $slug } }) {\n      id\n      body\n      tableOfContents\n      fields {\n        slug\n      }\n      frontmatter {\n        title\n        date\n        description\n        category\n        tags\n        draft\n        thumbnail {\n          publicURL\n          childImageSharp {\n            fluid(maxWidth: 590, traceSVG: { background: \"#333846\" }) {\n              aspectRatio\n              base64\n              sizes\n              src\n              srcSet\n              srcWebp\n              srcSetWebp\n              tracedSVG\n            }\n          }\n        }\n      }\n    }\n    site {\n      siteMetadata {\n        siteUrl\n      }\n    }\n    allMdx(\n      filter: {\n        frontmatter: { category: { eq: $category } }\n        fields: { slug: { ne: $slug } }\n      }\n      sort: { fields: [frontmatter___date], order: DESC }\n    ) {\n      edges {\n        node {\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            description\n            date\n            draft\n            category\n            tags\n            thumbnail {\n              childImageSharp {\n                fluid(maxHeight: 200, traceSVG: { background: \"#333846\" }) {\n                  aspectRatio\n                  base64\n                  sizes\n                  src\n                  srcSet\n                  srcWebp\n                  srcSetWebp\n                  tracedSVG\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n"],"sourceRoot":""}