{"version":3,"sources":["webpack://teslamy/./src/components/blog-list-card.js","webpack://teslamy/./src/templates/blog-list.js"],"names":["node","title","frontmatter","fields","slug","image","getImage","cover","className","Link","to","date","dangerouslySetInnerHTML","__html","description","excerpt","G","alt","S","src","placeholder","layout","width","aspectRatio","data","location","pageContext","siteTitle","site","siteMetadata","posts","allMarkdownRemark","edges","currentPage","isFirst","isLast","numPages","prevPage","nextPage","map","key","rel","xmlns","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d"],"mappings":"0/DA2EA,EAjEqB,SAAC,GAAc,IAAZA,EAAW,EAAXA,KAChBC,EAAQD,EAAKE,YAAYD,OAASD,EAAKG,OAAOC,KAC9CC,GAAQC,OAASN,EAAKE,YAAYK,OAExC,OACE,gCACE,uBAAKC,UAAU,mBAKb,gBAAC,EAAAC,KAAD,CAAMC,GAAIV,EAAKG,OAAOC,MACpB,uBAAKI,UAAU,qEACb,uBAAKA,UAAU,oBACb,uBAAKA,UAAU,iGACb,qBAAGA,UAAU,8CACVR,EAAKE,YAAYS,MAEpB,sBAAIH,UAAU,2CACXP,IAGL,uBAAKO,UAAU,gCACb,uBAAKA,UAAU,8CACb,uBACEA,UAAU,sBACVI,wBAAyB,CACvBC,OAAQb,EAAKE,YAAYY,aAAed,EAAKe,aAKrD,uBAAKP,UAAU,gCACb,uBAAKA,UAAU,sCACb,uBAAKA,UAAU,kCACZH,EACC,gBAAC,EAAAW,EAAD,CACEX,MAAOA,EACPY,IAAKhB,EACLO,UAAU,mDAGZ,gBAAC,EAAAU,EAAD,CACEC,IAAI,mCACJF,IAAI,iBACJG,YAAY,UACZC,OAAO,cACPC,MAAO,KACPC,YAAa,EACbf,UAAU,iDAPZ,+BCkCtB,EA9EiB,SAAC,GAAqC,IAAnCgB,EAAkC,EAAlCA,KAAMC,EAA4B,EAA5BA,SAAUC,EAAkB,EAAlBA,YAC5BC,EAAYH,EAAKI,KAAKC,aAAa5B,MACnC6B,EAAQN,EAAKO,kBAAkBC,MAC7BC,EAA0BP,EAA1BO,YAEFC,EAA0B,IAAhBD,EACVE,EAASF,IAHmBP,EAAbU,SAIfC,EAAWJ,EAAc,GAAM,EAAI,IAAxB,KAAkCA,EAAc,GAC3DK,EAAQ,KAAOL,EAAc,GAEnC,OACE,gBAAC,IAAD,CAAQR,SAAUA,EAAUxB,MAAO0B,GACjC,gBAAC,IAAD,CAAK1B,MAAM,cACX,uBAAKO,UAAU,qEACZsB,EAAMS,KAAI,YAAe,IAAZvC,EAAW,EAAXA,KACEA,EAAKE,YAAYD,OAASD,EAAKG,OAAOC,KACpD,OAAO,gBAAC,EAAD,CAAcoC,IAAKxC,EAAKG,OAAOC,KAAMJ,KAAMA,QAItD,uBAAKQ,UAAU,QACb,sBAAIA,UAAU,gDACZ,2BACI0B,GACA,gBAAC,EAAAzB,KAAD,CACEC,GAAI2B,EACJI,IAAI,OACJjC,UAAU,gJAEV,uBACEkC,MAAM,6BACNlC,UAAU,UACVmC,KAAK,OACLC,QAAQ,YACRC,OAAO,gBAEP,wBACEC,cAAc,QACdC,eAAe,QACfC,YAAa,EACbC,EAAE,qBAEC,IAlBT,kBAuBJ,2BACId,GACA,gBAAC,EAAA1B,KAAD,CACEC,GAAI4B,EACJG,IAAI,OACJjC,UAAU,gJAHZ,YAKY,IACV,uBACEkC,MAAM,6BACNlC,UAAU,UACVmC,KAAK,OACLC,QAAQ,YACRC,OAAO,gBAEP,wBACEC,cAAc,QACdC,eAAe,QACfC,YAAa,EACbC,EAAE","file":"component---src-templates-blog-list-js-5f8494c21586e63c6dee.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Link } from \"gatsby\";\nimport { GatsbyImage, getImage, StaticImage } from \"gatsby-plugin-image\";\n\nconst propTypes = {\n  node: PropTypes.object.isRequired,\n};\n\nconst BlogListCard = ({ node }) => {\n  const title = node.frontmatter.title || node.fields.slug;\n  const image = getImage(node.frontmatter.cover);\n\n  return (\n    <>\n      <div className=\"relative w-full\">\n        {/* Background card */}\n        {/* <div className=\"absolute w-full h-full bg-gradient-to-t from-gray-400 to-gray-300 shadow-md rounded-3xl transform -rotate-3\" /> */}\n\n        {/* Image card */}\n        <Link to={node.fields.slug}>\n          <div className=\"relative z-10 m-1 rounded-3xl shadow-xl bg-white dark:bg-gray-200\">\n            <div className=\"grid grid-cols-1\">\n              <div className=\"flex flex-wrap content-end z-10 col-start-1 row-start-1 px-4 pb-3 bg-gradient-to-t from-black\">\n                <p className=\"text-sm font-medium text-white mb-1 w-full\">\n                  {node.frontmatter.date}\n                </p>\n                <h2 className=\"text-xl font-semibold text-white w-full\">\n                  {title}\n                </h2>\n              </div>\n              <div className=\"col-start-1 row-start-2 px-4\">\n                <div className=\"flex items-center text-sm font-medium my-5\">\n                  <div\n                    className=\"truncate text-black\"\n                    dangerouslySetInnerHTML={{\n                      __html: node.frontmatter.description || node.excerpt,\n                    }}\n                  />\n                </div>\n              </div>\n              <div className=\"col-start-1 row-start-1 flex\">\n                <div className=\"grid grid-cols-3 grid-rows-2 gap-2\">\n                  <div className=\"relative col-span-3 row-span-2\">\n                    {image ? (\n                      <GatsbyImage\n                        image={image}\n                        alt={title}\n                        className=\"inset-0 object-cover bg-gray-100 rounded-t-3xl\"\n                      />\n                    ) : (\n                      <StaticImage\n                        src=\"../assets/default-blog-cover.jpg\"\n                        alt=\"No cover photo\"\n                        placeholder=\"blurred\"\n                        layout=\"constrained\"\n                        width={1024}\n                        aspectRatio={1}\n                        className=\"inset-0 object-cover bg-gray-100 rounded-t-3xl\"\n                      />\n                    )}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Link>\n      </div>\n    </>\n  );\n};\n\nBlogListCard.propTypes = propTypes;\n\nexport default BlogListCard;\n","import React from \"react\";\n\nimport { Link, graphql } from \"gatsby\";\n\nimport Layout from \"../components/layout\";\nimport SEO from \"../components/seo\";\nimport BlogListCard from \"../components/blog-list-card\";\n\nconst BlogList = ({ data, location, pageContext }) => {\n  const siteTitle = data.site.siteMetadata.title;\n  const posts = data.allMarkdownRemark.edges;\n  const { currentPage, numPages } = pageContext;\n\n  const isFirst = currentPage === 1;\n  const isLast = currentPage === numPages;\n  const prevPage = currentPage - 1 === 1 ? \"/\" : `/${currentPage - 1}`;\n  const nextPage = `/${currentPage + 1}`;\n\n  return (\n    <Layout location={location} title={siteTitle}>\n      <SEO title=\"All posts\" />\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 pt-5 lg:pt-0\">\n        {posts.map(({ node }) => {\n          const title = node.frontmatter.title || node.fields.slug;\n          return <BlogListCard key={node.fields.slug} node={node} />;\n        })}\n      </div>\n\n      <nav className=\"mt-8\">\n        <ul className=\"flex flex-wrap justify-between list-none p-0\">\n          <li>\n            {!isFirst && (\n              <Link\n                to={prevPage}\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 Page\n              </Link>\n            )}\n          </li>\n          <li>\n            {!isLast && (\n              <Link\n                to={nextPage}\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 Page{\" \"}\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 BlogList;\n\nexport const pageQuery = graphql`\n  query blogPageQuery($skip: Int!, $limit: Int!) {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    allMarkdownRemark(\n      sort: { fields: [frontmatter___date], order: DESC }\n      filter: { frontmatter: { draft: { ne: true } } }\n      limit: $limit\n      skip: $skip\n    ) {\n      edges {\n        node {\n          excerpt\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            date(formatString: \"MMMM DD, YYYY\")\n            description\n            cover {\n              childImageSharp {\n                gatsbyImageData(\n                  layout: CONSTRAINED\n                  width: 1024\n                  placeholder: BLURRED\n                  quality: 90\n                  aspectRatio: 1\n                )\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}