{"version":3,"sources":["webpack://teslamy/./src/templates/blog-post.js"],"names":["ImageCard","node","image","getImage","className","G","alt","name","data","pageContext","location","post","markdownRemark","previous","next","images","nodes","itemCount","pageInfo","title","frontmatter","description","excerpt","date","class","dangerouslySetInnerHTML","__html","html","map","key","id","Link","to","fields","slug","rel","xmlns","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d"],"mappings":"oKAQMA,EAAY,SAAC,GAAc,IAAZC,EAAW,EAAXA,KACbC,GAAQC,OAASF,GACvB,OACE,gCACE,uBAAKG,UAAU,4BACb,gBAAC,EAAAC,EAAD,CAAaH,MAAOA,EAAOI,IAAKL,EAAKM,KAAMH,UAAU,kBA4G7D,UAtGiB,SAAC,GAAqC,IAAnCI,EAAkC,EAAlCA,KAAMC,EAA4B,EAA5BA,YAAaC,EAAe,EAAfA,SAC/BC,EAAOH,EAAKI,eACVC,EAAmBJ,EAAnBI,SAAUC,EAASL,EAATK,KACZC,EAASP,EAAKO,OAAOC,MACrBC,EAAYT,EAAKO,OAAOG,SAASD,UAEvC,OACE,gBAAC,IAAD,CAAQP,SAAUA,EAAUS,MAAM,QAChC,gBAAC,IAAD,CACEA,MAAOR,EAAKS,YAAYD,MACxBE,YAAaV,EAAKS,YAAYC,aAAeV,EAAKW,UAEpD,2BAASlB,UAAU,QACjB,0BAAQA,UAAU,SAChB,sBAAIA,UAAU,gCACXO,EAAKS,YAAYD,OAEpB,qBAAGf,UAAU,SAASO,EAAKS,YAAYG,OAEzC,2BACEC,MAAM,mCACNC,wBAAyB,CAAEC,OAAQf,EAAKgB,QAE1C,4BAGDV,EAAY,GACX,gCACE,sBAAIb,UAAU,sBAAd,gBACgB,IACd,wBAAMA,UAAU,uCACba,EADH,YAIF,uBAAKb,UAAU,wDACZW,EAAOa,KAAI,SAAC3B,GAAD,OACV,gBAACD,EAAD,CAAWC,KAAMA,EAAM4B,IAAK5B,EAAK6B,SAIrC,sBAAI1B,UAAU,UAIlB,2BACE,sBAAIA,UAAU,gDACZ,0BACGS,GACC,gBAAC,EAAAkB,KAAD,CACEC,GAAInB,EAASoB,OAAOC,KACpBC,IAAI,OACJ/B,UAAU,gJAEV,uBACEgC,MAAM,6BACNhC,UAAU,UACViC,KAAK,OACLC,QAAQ,YACRC,OAAO,gBAEP,wBACEC,cAAc,QACdC,eAAe,QACfC,YAAa,EACbC,EAAE,qBAEC,IACN9B,EAASO,YAAYD,QAI5B,0BACGL,GACC,gBAAC,EAAAiB,KAAD,CACEC,GAAIlB,EAAKmB,OAAOC,KAChBC,IAAI,OACJ/B,UAAU,gJAETU,EAAKM,YAAYD,MAAO,IACzB,uBACEiB,MAAM,6BACNhC,UAAU,UACViC,KAAK,OACLC,QAAQ,YACRC,OAAO,gBAEP,wBACEC,cAAc,QACdC,eAAe,QACfC,YAAa,EACbC,EAAE","file":"component---src-templates-blog-post-js-c347641ded479773efc1.js","sourcesContent":["import React from \"react\";\n\nimport { Link, graphql } from \"gatsby\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\nimport Layout from \"../components/layout\";\nimport SEO from \"../components/seo\";\n\nconst ImageCard = ({ node }) => {\n  const image = getImage(node);\n  return (\n    <>\n      <div className=\"w-full h-full rounded-xl\">\n        <GatsbyImage image={image} alt={node.name} className=\"rounded-xl\" />\n      </div>\n    </>\n  );\n};\n\nconst BlogPost = ({ data, pageContext, location }) => {\n  const post = data.markdownRemark;\n  const { previous, next } = pageContext;\n  const images = data.images.nodes;\n  const itemCount = data.images.pageInfo.itemCount;\n\n  return (\n    <Layout location={location} title=\"Home\">\n      <SEO\n        title={post.frontmatter.title}\n        description={post.frontmatter.description || post.excerpt}\n      />\n      <article className=\"mb-4\">\n        <header className=\"mb-12\">\n          <h1 className=\"mb-2 pb-1 text-4xl font-bold\">\n            {post.frontmatter.title}\n          </h1>\n          <p className=\"block\">{post.frontmatter.date}</p>\n        </header>\n        <section\n          class=\"prose dark:prose-dark max-w-none\"\n          dangerouslySetInnerHTML={{ __html: post.html }}\n        />\n        <hr />\n      </article>\n\n      {itemCount > 0 && (\n        <>\n          <h4 className=\"mb-5 mt-5 text-5xl\">\n            Photo Gallery{\" \"}\n            <span className=\"text-lg text-gray-500 font-semibold\">\n              {itemCount} photos\n            </span>\n          </h4>\n          <div className=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4\">\n            {images.map((node) => (\n              <ImageCard node={node} key={node.id} />\n            ))}\n          </div>\n\n          <hr className=\"mt-4\" />\n        </>\n      )}\n\n      <nav>\n        <ul className=\"flex flex-wrap justify-between list-none p-0\">\n          <li>\n            {previous && (\n              <Link\n                to={previous.fields.slug}\n                rel=\"prev\"\n                className=\"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-6 w-6\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M15 19l-7-7 7-7\"\n                  />\n                </svg>{\" \"}\n                {previous.frontmatter.title}\n              </Link>\n            )}\n          </li>\n          <li>\n            {next && (\n              <Link\n                to={next.fields.slug}\n                rel=\"next\"\n                className=\"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500\"\n              >\n                {next.frontmatter.title}{\" \"}\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-6 w-6\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M9 5l7 7-7 7\"\n                  />\n                </svg>\n              </Link>\n            )}\n          </li>\n        </ul>\n      </nav>\n    </Layout>\n  );\n};\n\nexport default BlogPost;\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug($slug: String!) {\n    images: allFile(\n      filter: {\n        absolutePath: { regex: $slug }\n        extension: { regex: \"/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/\" }\n      }\n      sort: { fields: name, order: ASC }\n    ) {\n      pageInfo {\n        itemCount\n      }\n      nodes {\n        name\n        id\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 90)\n        }\n      }\n    }\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      html\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        description\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}