{"version":3,"file":"component---src-templates-pages-blog-page-jsx-e77da11aa20623ce7432.js","mappings":"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","sources":["webpack://sea-gatsby-store/./src/components/blog/related-articles.jsx","webpack://sea-gatsby-store/./src/templates/pages/blog-page.jsx"],"sourcesContent":["import { Link } from \"gatsby\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport CloudflareImage from \"../reusable/cloudflare-image\"\n\nconst RelatedArticles = ({ categories, currentBlogSlug }) => {\n  const blogQueryData = useStaticQuery(BLOG_QUERY)\n  const blogs = blogQueryData?.allSeaBlog?.nodes\n\n  const [blogsToDisplay, setBlogsToDisplay] = useState(blogs)\n\n  useEffect(() => {\n    let relatedBlogs = []\n\n    blogs.forEach((blog) => {\n      categories.forEach((cat) => {\n        blog.categories.every((blogCat) => {\n          if (cat.slug == blogCat.slug && currentBlogSlug != blog.slug) {\n            relatedBlogs.push(blog)\n            return false\n          }\n        })\n      })\n    })\n\n    if (relatedBlogs.length == 0) {\n      blogs.forEach((blog) => {\n        if (currentBlogSlug != blog.slug) {\n          relatedBlogs.push(blog)\n        }\n      })\n    }\n\n    setBlogsToDisplay(relatedBlogs)\n  }, [])\n\n  return (\n    <Container>\n      <Title>Related Articles</Title>\n      {blogsToDisplay.map((blog, index) => (\n        <Link to={`/blog/${blog.slug}`} key={index}>\n          <Article>\n            <ArticleImageContainer>\n              <CloudflareImage\n                src={blog.thumbnail.source_url}\n                alt={blog.author}\n                objectFit=\"cover\"\n              />\n            </ArticleImageContainer>\n            <ArticleInfoContainer>\n              <ArticleTitle>{blog.title}</ArticleTitle>\n              <ReadTime>{blog.read_time}</ReadTime>\n              <ArticleAuthor>\n                by {blog.author} &middot; {blog.date}\n              </ArticleAuthor>\n            </ArticleInfoContainer>\n          </Article>\n        </Link>\n      ))}\n    </Container>\n  )\n}\n\nexport default RelatedArticles\n\nconst Container = styled.div`\n  width: 400px;\n  min-width: 400px;\n  margin-left: 50px;\n  margin-top: 25px;\n\n  @media (max-width: ${({ theme }) => theme.breakMedium}) {\n    width: 300px;\n    min-width: 300px;\n  }\n\n  @media (max-width: ${({ theme }) => theme.breakSmall}) {\n    margin-left: 0;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n  }\n`\n\nconst Title = styled.h2`\n  margin-bottom: 30px;\n  width: 100%;\n  text-align: center;\n\n  @media (max-width: ${({ theme }) => theme.breakMedium}) {\n    font-size: 1.75rem;\n    line-height: 2.6rem;\n  }\n\n  @media (max-width: ${({ theme }) => theme.breakSmall}) {\n    text-align: center;\n  }\n`\n\nconst Article = styled.div`\n  width: 100%;\n  height: 400px;\n  box-shadow: 0px 3px 20px #00000014;\n  border-radius: 8px 8px 8px 8px;\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  overflow: hidden;\n\n  @media (max-width: ${({ theme }) => theme.breakMedium}) {\n    height: 300px;\n    width: 300px;\n  }\n`\nconst ArticleImageContainer = styled.div`\n  width: 100%;\n  height: 280px;\n  overflow: hidden;\n\n  @media (max-width: ${({ theme }) => theme.breakMedium}) {\n    height: 200px;\n  }\n`\n\nconst ArticleInfoContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 120px;\n  padding: 0 50px;\n  justify-content: space-between;\n  padding: 5px 5% 10px 5%;\n`\n\nconst ArticleTitle = styled.h4`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\nconst ReadTime = styled.p`\n  color: ${({ theme }) => theme.colors.brandHover};\n  text-align: center;\n  margin: 0;\n`\n\nconst ArticleAuthor = styled.p`\n  margin: 0;\n  text-align: center;\n  color: ${({ theme }) => theme.colors.lightgrey5};\n  font-style: italic;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\n// ===============\n//      QUERY\n// ===============\nconst BLOG_QUERY = graphql`\n  {\n    allSeaBlog {\n      nodes {\n        author\n        slug\n        title\n        date\n        read_time\n        categories {\n          slug\n          name\n        }\n        thumbnail {\n          source_url\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\n\nimport Layout from \"../../theme/layout\"\nimport SEO from \"../../components/header/seo\"\nimport RelatedArticles from \"../../components/blog/related-articles\"\n\nconst BlogPage = ({ pageContext, location }) => {\n  return (\n    <Layout\n      pathContext={pageContext}\n      location={location}\n      bannerDetails={{\n        title: pageContext.title,\n        subTitle: pageContext.read_time,\n        description: pageContext.excerpt,\n        image: pageContext.thumbnail.source_url,\n        theme: \"dark\",\n        italic: `by ${pageContext.author} · ${pageContext.date}`,\n      }}\n    >\n      <SEO yoast={pageContext.seo} />\n      <Container>\n        <BlogContent\n          dangerouslySetInnerHTML={{ __html: pageContext.content }}\n        ></BlogContent>\n        <RelatedArticles\n          categories={pageContext.categories}\n          currentBlogSlug={pageContext.slug}\n        ></RelatedArticles>\n      </Container>\n    </Layout>\n  )\n}\n\nexport default BlogPage\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  margin-top: 50px;\n  padding: 0 10px;\n\n  @media (max-width: ${({ theme }) => theme.breakSmall}) {\n    flex-direction: column;\n    align-items: center;\n  }\n`\n\nconst BlogContent = styled.div`\n  p,\n  figure,\n  h1,\n  h2 {\n    margin-top: 1.8rem;\n  }\n\n  p {\n    text-align: justify;\n  }\n\n  blockquote {\n    background-color: ${({ theme }) => theme.colors.brandGrey};\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 60px 10% 30px 10%;\n    margin: 50px 0 50px 0;\n\n    & > p {\n      margin-top: 0;\n      text-align: center;\n    }\n\n    & > cite {\n      margin-top: 10px;\n      font: normal normal bold 21px/35px Poppins;\n    }\n  }\n\n  .wp-block-column {\n    & > div {\n      display: inline-block;\n    }\n\n    @media (max-width: ${({ theme }) => theme.breakTiny}) {\n      align-items: center;\n    }\n  }\n\n  iframe {\n    @media (max-width: ${({ theme }) => theme.breakSmall}) {\n      width: 100%;\n    }\n  }\n`\n"],"names":["categories","currentBlogSlug","blogQueryData","useStaticQuery","BLOG_QUERY","blogs","allSeaBlog","nodes","useState","blogsToDisplay","setBlogsToDisplay","useEffect","relatedBlogs","forEach","blog","cat","every","blogCat","slug","push","length","Container","Title","map","index","Link","to","key","Article","ArticleImageContainer","src","thumbnail","source_url","alt","author","objectFit","ArticleInfoContainer","ArticleTitle","title","ReadTime","read_time","ArticleAuthor","date","styled","theme","breakMedium","breakSmall","colors","brandHover","lightgrey5","pageContext","location","pathContext","bannerDetails","subTitle","description","excerpt","image","italic","yoast","seo","BlogContent","dangerouslySetInnerHTML","__html","content","brandGrey","breakTiny"],"sourceRoot":""}