{"version":3,"file":"component---src-pages-blog-tsx-5fa84dca0f329e623a9e.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/images/blog-placeholder.jpg","webpack://gatsby-starter-default/./src/components/BlogCard/BlogCard.tsx","webpack://gatsby-starter-default/./src/components/BlogCard/styled.tsx","webpack://gatsby-starter-default/./src/components/Tag/styled.tsx","webpack://gatsby-starter-default/./src/components/Tag/Tag.tsx","webpack://gatsby-starter-default/./src/components/TagsHeader/styled.tsx","webpack://gatsby-starter-default/./src/components/TagsHeader/TagsHeader.tsx","webpack://gatsby-starter-default/./src/components/Blog/styled.tsx","webpack://gatsby-starter-default/./src/components/Blog/Blog.tsx","webpack://gatsby-starter-default/./src/pages/blog.tsx","webpack://gatsby-starter-default/./src/images/blog/search.inline.svg","webpack://gatsby-starter-default/./src/images/background/home-bg.jpg"],"sourcesContent":["export default __webpack_public_path__ + \"static/blog-placeholder-92d1aacb801e5681f81b67d3b54716c4.jpg\";","import React from 'react';\nimport Img, { FluidObject } from 'gatsby-image';\nimport { Link } from 'gatsby';\n\nimport { ROUTES } from 'constants/common';\nimport placeholderImage from 'images/blog-placeholder.jpg';\n\nimport Tag from 'components/Tag';\nimport {\n  Title,\n  Wrapper,\n  Image,\n  InfoWrapper,\n  BottomWrapper,\n  TagsWrapper,\n  ImgWrapper,\n  ExcerptWrapper,\n  StyledButton,\n} from './styled';\n\ninterface Props {\n  image?: {\n    fluid: FluidObject;\n  };\n  title: string;\n  slug: string;\n  date: string;\n  author: string;\n  tags?: { id: string; name: string; slug: string }[];\n  horizontal?: boolean;\n  excerpt?: string;\n  short?: boolean;\n}\n\nconst BlogCard = ({\n  author,\n  horizontal = false,\n  image,\n  title,\n  date,\n  slug,\n  tags,\n  excerpt,\n}: Props) => (\n  <Wrapper horizontal={horizontal}>\n    <ImgWrapper horizontal={horizontal}>\n      <Link to={`${ROUTES.blog}/${slug}`}>\n        {image ? (\n          <Img fluid={{ ...image.fluid, aspectRatio: 6 / 3.5 }} alt={title} />\n        ) : (\n          <Image src={placeholderImage} />\n        )}\n      </Link>\n    </ImgWrapper>\n    <InfoWrapper horizontal={horizontal}>\n      {!!tags?.length && (\n        <TagsWrapper>\n          {tags.map((tag) => (\n            <Tag key={tag.id} name={tag.name} slug={tag.slug} />\n          ))}\n        </TagsWrapper>\n      )}\n      <Link to={`${ROUTES.blog}/${slug}`}>\n        <Title>{title}</Title>\n      </Link>\n      {horizontal && excerpt && (\n        <ExcerptWrapper dangerouslySetInnerHTML={{ __html: excerpt }} />\n      )}\n      <BottomWrapper>\n        <p>by {author}</p>\n        <p>{date}</p>\n      </BottomWrapper>\n      {horizontal && (\n        <Link to={`${ROUTES.blog}/${slug}`}>\n          <StyledButton>Read more</StyledButton>\n        </Link>\n      )}\n    </InfoWrapper>\n  </Wrapper>\n);\n\nexport default BlogCard;\n","import styled from 'styles/styled';\n\nimport { Button } from 'components/UI/Button';\n\nexport const Wrapper = styled.article<{ horizontal: boolean }>`\n  background-color: rgba(0, 90, 160, 0.3);\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  height: ${({ horizontal }) => (horizontal ? 'auto' : '100%')};\n  overflow: hidden;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    flex-direction: ${({ horizontal }) => (horizontal ? 'row' : 'column')};\n  }\n`;\n\nexport const ImgWrapper = styled.div<{ horizontal: boolean }>`\n  flex-basis: ${({ horizontal }) => (horizontal ? '50%' : 'auto')};\n  flex-grow: 0;\n  flex-shrink: 0;\n\n  .gatsby-image-wrapper {\n    height: ${({ horizontal }) => (horizontal ? '100%' : 'auto')};\n  }\n`;\n\nexport const Image = styled.img`\n  object-fit: cover;\n  height: 100%;\n`;\n\nexport const Title = styled.h3`\n  font-size: ${({ theme }) => theme.fontSize.smallBase};\n  font-weight: ${({ theme }) => theme.fontWeight.bold};\n  margin-bottom: 15px;\n\n  @media ${({ theme }) => theme.devices.large} {\n    font-size: ${({ theme }) => theme.fontSize.subtitleMobile};\n  }\n`;\n\nexport const ExcerptWrapper = styled.div`\n  color: ${({ theme }) => theme.palette.light};\n`;\n\nexport const StyledButton = styled(Button)`\n  margin-top: 30px;\n  padding: 10px 40px;\n  text-transform: uppercase;\n`;\n\nexport const InfoWrapper = styled.div<{ horizontal: boolean }>`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 15px;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    padding: ${({ horizontal }) => (horizontal ? '30px' : '15px')};\n  }\n`;\n\nexport const BottomWrapper = styled.div`\n  align-items: flex-end;\n  display: flex;\n  justify-content: space-between;\n  flex-grow: 1;\n  margin-top: 10px;\n\n  p {\n    color: ${({ theme }) => theme.palette.blogAccent};\n    font-weight: 400;\n  }\n`;\n\nexport const TagsWrapper = styled.ul`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin: 10px 0 25px;\n`;\n","import styled from 'styles/styled';\n\nexport const TagLi = styled.li`\n  border: 1px solid ${({ theme }) => theme.palette.blogAccent};\n  color: ${({ theme }) => theme.palette.blogAccent};\n  cursor: pointer;\n  border-radius: 1em;\n  line-height: 1;\n  padding: 4px 10px;\n`;\n","import React from 'react';\nimport { navigate } from '@reach/router';\n\nimport { ROUTES } from 'constants/common';\n\nimport { TagLi } from './styled';\n\ninterface Props {\n  name: string;\n  slug: string;\n}\n\nconst Tag = ({ name, slug }: Props) => {\n  return (\n    <TagLi onClick={() => navigate(`${ROUTES.blog}?tag=${slug}`)}>{name}</TagLi>\n  );\n};\n\nexport default Tag;\n","import styled from 'styles/styled';\n\nexport const Wrapper = styled.div`\n  margin: 0 auto 20px;\n  max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    display: flex;\n    margin-bottom: 50px;\n  }\n`;\n\nexport const TagsWrapper = styled.div`\n  background-color: #012f5a;\n  border-radius: 10px;\n  line-height: 1.4;\n  flex-grow: 1;\n  padding: 15px 20px;\n`;\n\nexport const TagsList = styled.ul<{ searching: boolean }>`\n  display: flex;\n  flex-wrap: wrap;\n  font-size: 18px;\n  justify-content: space-between;\n  justify-content: ${({ searching }) =>\n    searching ? 'flex-start' : 'space-between'};\n  max-height: 1.3em;\n  overflow: hidden;\n`;\n\nexport const Tag = styled.li<{ active?: boolean }>`\n  color: ${({ active, theme }) =>\n    theme.palette[active ? 'light' : 'blogAccent']};\n  cursor: pointer;\n  font-size: inherit;\n  font-weight: ${({ active }) => (active ? 700 : 400)};\n\n  & + & {\n    margin-left: 15px;\n  }\n\n  @media ${({ theme }) => theme.devices.large} {\n    & + & {\n      margin-left: 30px;\n    }\n  }\n`;\n\nexport const SearchWrapper = styled.div`\n  margin-bottom: 20px;\n  position: relative;\n\n  svg {\n    color: ${({ theme }) => theme.palette.blogAccent};\n    height: 1em;\n    pointer-events: none;\n    position: absolute;\n    right: 20px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: ${({ theme }) => theme.ui.transition('color')};\n    width: 1em;\n  }\n\n  @media ${({ theme }) => theme.devices.medium} {\n    margin-left: 20px;\n    margin-bottom: 0;\n    order: 1;\n  }\n`;\n\nexport const SearchInput = styled.input`\n  background-color: transparent;\n  border: 1px solid #005aa0;\n  border-radius: 10px;\n  color: ${({ theme }) => theme.palette.blogAccent};\n  line-height: 1.4;\n  min-width: 200px;\n  transition: ${({ theme }) => theme.ui.transition('all')};\n  padding: 15px 40px 15px 20px;\n  width: 100%;\n\n  &:focus {\n    border-color: ${({ theme }) => theme.palette.light};\n    color: ${({ theme }) => theme.palette.light};\n    outline: none;\n\n    &::placeholder {\n      color: ${({ theme }) => theme.palette.light};\n    }\n\n    & + svg {\n      color: ${({ theme }) => theme.palette.light};\n    }\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => theme.palette.blogAccent};\n    transition: ${({ theme }) => theme.ui.transition('color')};\n  }\n`;\n","import React, { useState } from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport { navigate, useLocation } from '@reach/router';\n\nimport { ROUTES } from 'constants/common';\nimport Search from 'images/blog/search.inline.svg';\n\nimport {\n  SearchInput,\n  SearchWrapper,\n  Tag,\n  TagsList,\n  TagsWrapper,\n  Wrapper,\n} from './styled';\n\ntype Tag = {\n  count: number;\n  id: string;\n  name: string;\n  slug: string;\n};\n\ntype TagsPayload = {\n  allWpTag: {\n    nodes: Tag[];\n  };\n};\n\nconst TagsHeader = () => {\n  const { pathname, search } = useLocation();\n  const queryObj = new URLSearchParams(search);\n  const tag = queryObj.get('tag');\n  const [val, setVal] = useState('');\n  const { allWpTag } = useStaticQuery<TagsPayload>(graphql`\n    {\n      allWpTag(\n        sort: { fields: count, order: DESC }\n        filter: { count: { gte: 1 } }\n      ) {\n        nodes {\n          count\n          id\n          name\n          slug\n        }\n      }\n    }\n  `);\n  const tags = allWpTag.nodes.filter((t) => {\n    if (t.slug === tag) {\n      return false;\n    }\n\n    if (!val) {\n      return true;\n    }\n\n    if (t.name.includes(val)) {\n      return true;\n    }\n\n    return false;\n  });\n  const activeTag = allWpTag.nodes.find((t) => t.slug === tag);\n\n  return (\n    <Wrapper>\n      <SearchWrapper>\n        <SearchInput\n          placeholder=\"search by tags\"\n          onChange={(e) => setVal(e.target.value)}\n          value={val}\n        />\n        <Search />\n      </SearchWrapper>\n\n      <TagsWrapper>\n        <TagsList searching={Boolean(val)}>\n          {activeTag && <Tag active>{activeTag.name}</Tag>}\n          {!val && (\n            <Tag\n              active={!tag && pathname === ROUTES.blog}\n              onClick={() => navigate(ROUTES.blog)}\n            >\n              newest\n            </Tag>\n          )}\n          {tags.map((t) => (\n            <Tag\n              key={t.id}\n              onClick={() => {\n                navigate(`${ROUTES.blog}?tag=${t.slug}`);\n                setVal('');\n              }}\n            >\n              {t.name}\n            </Tag>\n          ))}\n        </TagsList>\n      </TagsWrapper>\n    </Wrapper>\n  );\n};\n\nexport default TagsHeader;\n","import styled from 'styles/styled';\nimport { Wrapper as BlogCardWrapper } from 'components/BlogCard/styled';\nimport { Link } from 'gatsby';\n\nexport const Wrapper = styled.div`\n  padding: 0 18px;\n  margin: 0 auto 100px;\n  max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n  width: 100%;\n\n  > button {\n    margin-bottom: 1.25rem;\n\n    p {\n      font-size: ${({ theme }) => theme.fontSize.title};\n    }\n  }\n\n  ${BlogCardWrapper} {\n    margin: 0;\n  }\n\n  @media ${({ theme }) => theme.devices.large} {\n    padding: 0;\n    margin: 0 auto 100px;\n\n    video {\n      left: 0;\n      width: 100vw;\n    }\n  }\n`;\n\nexport const Articles = styled.section`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));\n  grid-column-gap: 15px;\n  grid-row-gap: 22px;\n`;\n\nexport const PostWrapper = styled.div`\n  > a {\n    display: block;\n    height: 100%;\n  }\n\n  &:first-child {\n    grid-column: 1 / -1;\n  }\n`;\n\nexport const PaginationWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-top: 50px;\n`;\n\nexport const Page = styled(Link)<{ active: boolean }>`\n  color: ${({ active, theme }) => (active ? '#fff' : theme.palette.blogAccent)};\n  font-size: 18px;\n  position: relative;\n  text-align: center;\n\n  &::before {\n    background-color: #fff;\n    content: ${({ active }) => (active ? '\"\"' : 'none')};\n    height: 2px;\n    left: -2px;\n    position: absolute;\n    right: -2px;\n    top: calc(100% + 2px);\n  }\n\n  & + & {\n    margin-left: 15px;\n  }\n`;\n\nexport const ChangePage = styled(Link)`\n  cursor: pointer;\n  height: 0.8em;\n  position: relative;\n  width: 0.8em;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &::before {\n    border-left: 2px solid ${({ theme }) => theme.palette.blogAccent};\n    border-top: 2px solid ${({ theme }) => theme.palette.blogAccent};\n    border-radius: 2px;\n    content: '';\n    display: block;\n    height: 100%;\n    width: 100%;\n  }\n\n  &:first-child {\n    margin-right: 15px;\n    transform: rotateZ(-45deg);\n  }\n\n  &:last-child {\n    margin-left: 15px;\n    transform: rotateZ(135deg);\n  }\n`;\n","import React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport { useLocation } from '@reach/router';\n\nimport { ROUTES } from 'constants/common';\nimport { BlogTypes } from 'types';\n\nimport BlogCard from 'components/BlogCard';\nimport TagsHeader from 'components/TagsHeader';\n\nimport {\n  Wrapper,\n  Articles,\n  PostWrapper,\n  Page,\n  PaginationWrapper,\n  ChangePage,\n} from './styled';\n\n// type Tag = BlogTypes.Tag;\ntype BlogPost = BlogTypes.BlogPost;\n\nconst POSTS_PER_PAGE = 10;\n\nconst pageFilter = (index: number, currentPage: number, pages: number) => {\n  if (index === 0) {\n    return true;\n  }\n\n  if (index === pages - 1) {\n    return true;\n  }\n\n  if (index >= currentPage - 1 && index <= currentPage + 1) {\n    return true;\n  }\n\n  return false;\n};\n\nconst Blog = () => {\n  const { search } = useLocation();\n  const queryObj = new URLSearchParams(search);\n  const page = parseInt(queryObj.get('page') || '1');\n  const tag = queryObj.get('tag');\n  const {\n    blogCategory,\n  }: // tags,\n  {\n    blogCategory: { nodes: BlogPost[] };\n    tags: { nodes: { name: string; slug: string }[] };\n  } = useStaticQuery(graphql`\n    query Blog {\n      blogCategory: allWpPost(\n        filter: {\n          categories: { nodes: { elemMatch: { name: { eq: \"Blog\" } } } }\n        }\n        sort: { fields: date, order: DESC }\n      ) {\n        nodes {\n          ...BlogCardFragment\n        }\n      }\n\n      tags: allWpTag {\n        nodes {\n          id\n          name\n          slug\n        }\n      }\n    }\n  `);\n\n  const blogPosts = blogCategory.nodes.filter(\n    (p) => !tag || p.tags.nodes.some((t) => t.slug === tag),\n  );\n  const pagesNum = Math.ceil(blogPosts.length / POSTS_PER_PAGE);\n  const pageStart = 0 + POSTS_PER_PAGE * (page - 1);\n  const pageEnd = pageStart + POSTS_PER_PAGE;\n  const tagQuery = tag ? `&tag=${tag}` : '';\n  const nextPageQuery = `?page=${Math.min(page + 1, pagesNum)}${tagQuery}`;\n  const prevPageQuery = page > 2 ? `?page=${page - 1}${tagQuery}` : '';\n\n  return (\n    <Wrapper>\n      <TagsHeader />\n      <Articles>\n        {blogPosts\n          .slice(pageStart, pageEnd)\n          .map(\n            (\n              { id, slug, featuredImage, title, date, tags, author, excerpt },\n              i,\n            ) => {\n              return (\n                <PostWrapper key={id}>\n                  <BlogCard\n                    image={featuredImage?.node.localFile.childImageSharp}\n                    title={title}\n                    slug={slug}\n                    date={date}\n                    tags={tags.nodes}\n                    author={author.node.name}\n                    horizontal={i === 0}\n                    excerpt={excerpt}\n                  />\n                </PostWrapper>\n              );\n            },\n          )}\n      </Articles>\n\n      {pagesNum > 1 && (\n        <PaginationWrapper>\n          <ChangePage to={`${ROUTES.blog}${prevPageQuery}`} />\n          {Array.from({ length: pagesNum })\n            .map((_, i) => i)\n            .filter((_, i) => pageFilter(i, page - 1, pagesNum))\n            .map((i) => {\n              const pageNum = i + 1;\n              const pageQuery = i ? `?page=${pageNum}${tagQuery}` : '';\n              return (\n                <Page\n                  key={i}\n                  to={`${ROUTES.blog}${pageQuery}`}\n                  active={pageNum === page}\n                >\n                  {pageNum.toString().padStart(2, '0')}\n                </Page>\n              );\n            })}\n          <ChangePage to={`${ROUTES.blog}${nextPageQuery}`} />\n        </PaginationWrapper>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default Blog;\n","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport { theme } from 'styles/styled';\nimport homeBg from 'images/background/home-bg.jpg';\nimport { ROUTES } from 'constants/common';\n\nimport SEO from 'components/SEO';\nimport Layout from 'components/Layout';\nimport Blog from 'components/Blog';\n\nconst BlogPage = () => {\n  const { wpPage } = useStaticQuery(graphql`\n    query {\n      wpPage(slug: { eq: \"blog\" }) {\n        ...MetaData\n      }\n    }\n  `);\n\n  wpPage.seo.opengraphUrl = ROUTES.blog;\n\n  return (\n    <Layout backgroundColor={theme.palette.dark} backgroundImage={homeBg}>\n      <SEO metadata={wpPage || {}} />\n      <Blog />\n    </Layout>\n  );\n};\n\nexport default BlogPage;\n","var React = require('react');\n\nfunction SearchInline (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"circle\",{\"cx\":\"8\",\"cy\":\"8\",\"r\":\"7\",\"stroke\":\"currentColor\",\"key\":0}),React.createElement(\"path\",{\"d\":\"M13.5 13L18 17.5\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"key\":1})]);\n}\n\nSearchInline.defaultProps = {\"viewBox\":\"0 0 19 18\",\"fill\":\"none\"};\n\nmodule.exports = SearchInline;\n\nSearchInline.default = SearchInline;\n","export default __webpack_public_path__ + \"static/home-bg-daa5b751b0c5683d6b03847793fc8be6.jpg\";"],"names":["author","horizontal","image","title","date","slug","tags","excerpt","Link","to","ROUTES","fluid","aspectRatio","alt","src","placeholderImage","length","map","tag","Tag","key","id","name","dangerouslySetInnerHTML","__html","Wrapper","styled","theme","devices","medium","ImgWrapper","Image","Title","fontSize","smallBase","fontWeight","bold","large","subtitleMobile","ExcerptWrapper","palette","light","StyledButton","Button","InfoWrapper","BottomWrapper","blogAccent","TagsWrapper","TagLi","onClick","navigate","dimensions","contentMaxWidthMedium","TagsList","searching","active","SearchWrapper","ui","transition","SearchInput","useLocation","pathname","search","URLSearchParams","get","useState","val","setVal","allWpTag","useStaticQuery","nodes","filter","t","includes","activeTag","find","placeholder","onChange","e","target","value","Boolean","BlogCardWrapper","Articles","PostWrapper","PaginationWrapper","Page","ChangePage","queryObj","page","parseInt","blogPosts","blogCategory","p","some","pagesNum","Math","ceil","pageStart","pageEnd","tagQuery","nextPageQuery","min","prevPageQuery","TagsHeader","slice","i","featuredImage","BlogCard","node","localFile","childImageSharp","Array","from","_","currentPage","pages","index","pageNum","pageQuery","toString","padStart","wpPage","seo","opengraphUrl","Layout","backgroundColor","backgroundImage","homeBg","SEO","metadata","React","SearchInline","props","createElement","defaultProps","module","exports","default"],"sourceRoot":""}