{"version":3,"file":"component---src-templates-blog-index-tsx-1d065f853ed00dc4dbd1.js","mappings":"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","sources":["webpack://devheroes-blog/./src/components/SvgIcon/SvgIcon.tsx","webpack://devheroes-blog/./src/components/icons/Github/Github.tsx","webpack://devheroes-blog/./src/components/icons/Twitter/Twitter.tsx","webpack://devheroes-blog/./src/components/icons/YouTube/YouTube.tsx","webpack://devheroes-blog/./src/components/Footer/Footer.tsx","webpack://devheroes-blog/./src/templates/blog-index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype Props = {\n  children: ReactNode;\n  color?: string;\n  size?: string;\n  titleAccess?: string;\n  viewBox?: string;\n};\n\nexport default function SvgIcon({\n  children,\n  color,\n  size = '24px',\n  titleAccess,\n  viewBox = '0 0 24 24',\n  ...rest\n}: Props) {\n  return (\n    <Svg\n      color={color}\n      size={size}\n      viewBox={viewBox}\n      focusable=\"false\"\n      aria-hidden={titleAccess ? undefined : 'true'}\n      role={titleAccess ? 'img' : 'presentation'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"svg-icon\"\n      fill=\"none\"\n      {...rest}\n    >\n      {children}\n      {titleAccess ? (\n        <title data-testid=\"svg-icon-title\">{titleAccess}</title>\n      ) : null}\n    </Svg>\n  );\n}\n\nconst Svg = styled.svg<Props>`\n  width: 1em;\n  height: 1em;\n  display: block;\n  flex-shrink: 0;\n  font-size: ${(props) => props.size};\n  color: ${(props) => (props.color ? props.color : 'var(--bg-inverted)')};\n`;\n","import React from 'react';\n\nimport SvgIcon from '../../SvgIcon';\n\ntype Props = {\n  size?: string;\n  color?: string;\n};\n\nexport default function Github({ color, size }: Props) {\n  return (\n    <SvgIcon size={size} color={color} viewBox=\"0 0 496 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"\n      />\n    </SvgIcon>\n  );\n}\n","import React from 'react';\n\nimport SvgIcon from '../../SvgIcon';\n\ntype Props = {\n  size?: string;\n  color?: string;\n};\n\nexport default function Twitter({ color, size }: Props) {\n  return (\n    <SvgIcon size={size} color={color}>\n      <path\n        d=\"M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z\"\n        fill=\"currentColor\"\n      />\n    </SvgIcon>\n  );\n}\n","import React from 'react';\n\nimport SvgIcon from '../../SvgIcon';\n\ntype Props = {\n  size?: string;\n  color?: string;\n};\n\nexport default function YouTube({ color, size }: Props) {\n  return (\n    <SvgIcon size={size} color={color} viewBox=\"0 0 576 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"\n      />\n    </SvgIcon>\n  );\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport Github from '../icons/Github';\nimport Twitter from '../icons/Twitter';\nimport YouTube from '../icons/YouTube';\nimport { rhythm } from '../../utils/typography';\n\nexport default function Footer() {\n  const date = new Date();\n\n  return (\n    <FooterStyles>\n      <Row>\n        <Icons>\n          <a\n            href=\"https://mobile.twitter.com/devheroes_io\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <Twitter size=\"48px\" />\n          </a>\n          <a\n            href=\"https://www.youtube.com/c/DevheroesIo\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <YouTube size=\"48px\" />\n          </a>\n          <a\n            href=\"https://github.com/devheroes\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <Github size=\"48px\" />\n          </a>\n        </Icons>\n        <div>\n          <a href=\"/rss.xml\" target=\"_blank\" rel=\"noopener noreferrer\">\n            rss\n          </a>\n        </div>\n      </Row>\n      <Row>\n        <div>\n          <span>Copyright © {date.getFullYear()} </span>\n          <a href=\"http://devheroes.io\" title=\"DevHeroes\">\n            DevHeroes\n          </a>\n        </div>\n      </Row>\n    </FooterStyles>\n  );\n}\n\nconst FooterStyles = styled.footer`\n  margin-top: ${rhythm(2.5)};\n  padding-top: ${rhythm(1)};\n`;\n\nconst Row = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  padding-bottom: 32px;\n\n  &:last-child {\n    padding-bottom: 0px;\n  }\n`;\n\nconst Icons = styled.div`\n  display: flex;\n\n  a {\n    box-shadow: none;\n    margin-right: 32px;\n  }\n`;\n","import { Link, graphql } from 'gatsby';\nimport styled from 'styled-components';\nimport { GatsbyImage, getImage, IGatsbyImageData } from 'gatsby-plugin-image';\n\nimport { formatPostDate, formatReadingTime } from '../utils/helpers';\n\nimport Footer from '../components/Footer';\nimport Layout from '../layouts/Layout';\nimport Panel from '../components/Panel';\nimport React from 'react';\nimport SEO from '../components/SEO';\nimport { rhythm } from '../utils/typography';\n\nimport { authors } from '../utils/authors';\n\ntype Props = {\n  location: {\n    pathname: string;\n  };\n  data: {\n    site: {\n      siteMetadata: {\n        title: string;\n      };\n    };\n    allMarkdownRemark: {\n      edges: Array<{\n        node: {\n          frontmatter: {\n            author: string;\n            date: string;\n            spoiler: string;\n            title: string;\n          };\n          fields: {\n            slug: string;\n          };\n          timeToRead: number;\n        };\n      }>;\n    };\n    avatars: {\n      edges: Array<{\n        node: {\n          childImageSharp: {\n            gatsbyImageData: IGatsbyImageData;\n          };\n        };\n      }>;\n    };\n  };\n  pageContext: {\n    langKey: string;\n  };\n};\n\nexport default function BlogIndexTemplate({\n  location,\n  data,\n  pageContext,\n}: Props) {\n  const siteTitle = data.site.siteMetadata.title;\n  const langKey = pageContext.langKey;\n\n  const posts = data.allMarkdownRemark.edges;\n\n  return (\n    <Layout location={location} title={siteTitle}>\n      <SEO />\n      <main>\n        {langKey !== 'pt-br' && (\n          <Panel>\n            Esses artigos foram{' '}\n            <a\n              href=\"https://github.com/devheroes/devheroes-blog#contributing-translations\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              traduzidos pela comunidade\n            </a>\n            .\n          </Panel>\n        )}\n\n        {posts.map(({ node }) => {\n          const title = node.frontmatter.title || node.fields.slug;\n          const author = node.frontmatter.author;\n          const avatar = data.avatars.edges.find((avatar) =>\n            avatar.node.childImageSharp.gatsbyImageData.images.fallback?.src.includes(\n              author\n            )\n          );\n          const image =\n            avatar && getImage(avatar.node.childImageSharp.gatsbyImageData);\n\n          return (\n            <article key={node.fields.slug}>\n              <header>\n                <h3\n                  style={{\n                    fontFamily: 'Montserrat, sans-serif',\n                    fontSize: rhythm(1),\n                    marginBottom: rhythm(1 / 4),\n                  }}\n                >\n                  <Link\n                    style={{ boxShadow: 'none' }}\n                    to={node.fields.slug}\n                    rel=\"bookmark\"\n                  >\n                    {title}\n                  </Link>\n                </h3>\n                <ArticleInfo>\n                  {avatar && image && (\n                    <GatsbyImage image={image} alt={author} />\n                  )}\n                  <small>\n                    {authors[author].name}\n                    {` • ${formatPostDate(node.frontmatter.date, langKey)}`}\n                    {` • ${formatReadingTime(node.timeToRead)}`}\n                  </small>\n                </ArticleInfo>\n              </header>\n              <p\n                dangerouslySetInnerHTML={{ __html: node.frontmatter.spoiler }}\n              />\n            </article>\n          );\n        })}\n      </main>\n      <Footer />\n    </Layout>\n  );\n}\n\nconst ArticleInfo = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 8px 0;\n\n  small {\n    margin-left: 16px;\n  }\n  img {\n    border-radius: 50%;\n  }\n`;\n\nexport const pageQuery = graphql`\n  query ($langKey: String!) {\n    site {\n      siteMetadata {\n        title\n        description\n      }\n    }\n    allMarkdownRemark(\n      filter: { fields: { langKey: { eq: $langKey } } }\n      sort: { fields: [frontmatter___date], order: DESC }\n    ) {\n      edges {\n        node {\n          fields {\n            slug\n            langKey\n          }\n          timeToRead\n          frontmatter {\n            author\n            date(formatString: \"MMMM DD, YYYY\")\n            title\n            spoiler\n          }\n        }\n      }\n    }\n    avatars: allFile(filter: { relativePath: { regex: \"/authors/\" } }) {\n      edges {\n        node {\n          childImageSharp {\n            gatsbyImageData(\n              width: 32\n              placeholder: BLURRED\n              formats: [AUTO, WEBP, AVIF]\n            )\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":["SvgIcon","children","color","size","titleAccess","viewBox","rest","Svg","focusable","undefined","role","xmlns","fill","styled","props","Github","d","Twitter","YouTube","Footer","date","Date","FooterStyles","Row","Icons","href","target","rel","getFullYear","title","rhythm","BlogIndexTemplate","location","data","pageContext","siteTitle","site","siteMetadata","langKey","posts","allMarkdownRemark","edges","Layout","SEO","Panel","map","node","frontmatter","fields","slug","author","avatar","avatars","find","childImageSharp","gatsbyImageData","images","fallback","src","includes","image","getImage","key","style","fontFamily","fontSize","marginBottom","Link","boxShadow","to","ArticleInfo","G","alt","authors","name","formatPostDate","formatReadingTime","timeToRead","dangerouslySetInnerHTML","__html","spoiler"],"sourceRoot":""}