{"version":3,"sources":["webpack://@viralganatra/viralganatra.com/./src/components/post-excerpt.tsx","webpack://@viralganatra/viralganatra.com/./src/components/tags.tsx","webpack://@viralganatra/viralganatra.com/./src/pages/index.tsx"],"names":["Title","Excerpt","PostExcerpt","fields","frontmatter","Link","to","slug","title","dateTime","isoDate","date","dangerouslySetInnerHTML","__html","intro","TagList","Tag","Tags","tags","canNavigateToAllTags","className","length","map","tag","key","Masthead","mediaQuery","sm","lg","LatestPostTagsWrapper","contentWrapper","md","LatestPost","LatestText","TagsWrapper","Posts","HomePage","data","location","nodes","group","allMdx","firstPost","otherPosts","tagsByCount","sort","a","b","count"],"mappings":"iOAgBA,IAAMA,GAAK,uNAcLC,GAAO,gJAOE,SAASC,EAAT,GAAiE,IAA5C,OAAEC,EAAF,YAAUC,GAAiC,EAC7E,OACE,yBACE,wBACE,SAACJ,EAAD,MACE,SAAC,EAAAK,KAAD,CAAMC,GAAIH,EAAOI,MAAOH,EAAYI,SAEtC,iBAAMC,SAAUL,EAAYM,SAAUN,EAAYO,QAEpD,SAACV,EAAD,CAASW,wBAAyB,CAAEC,OAAQT,EAAYU,Y,8GCpC9D,IAAMC,GAAO,iMAYPC,GAAM,OAAOX,OAAP,sBAAH,iMAWM,SAASY,EAAT,GAAkF,IAApE,KAAEC,EAAO,GAAT,qBAAaC,GAAuB,EAApC,UAA2CC,GAAwB,EAC9F,OAAKF,EAAKG,QAKR,SAACN,EAAD,CAASK,UAAWA,GACjBF,EAAKI,KAAKC,IACT,eAAIC,IAAKD,IACP,SAACP,EAAD,CAAKV,GAAE,SAAWiB,EAAX,KAAoBA,MAG9BJ,GACC,oBACE,SAAC,EAAAd,KAAD,CAAMC,GAAG,UAAT,aAEA,MAdC,O,uLCFJ,IAsBDmB,GAAQ,sIAOVC,OAAWC,MAPD,gCAWVD,OAAWE,MAXD,oBAgBRC,GAAqB,mCACvBC,KADuB,+CAKvBJ,OAAWK,MALY,uEAWrBC,GAAU,4LAUZN,OAAWC,MAVC,qFAgBZD,OAAWK,MAhBC,6QAgCVE,GAAU,4QAWZP,OAAWK,MAXC,kEAoBVG,GAAW,8EAIXC,GAAK,mCACPL,KADO,6CAKPJ,OAAWC,MALJ,sIAUPD,OAAWK,MAVJ,yIAiBI,SAASK,EAAT,GAAsD,IAApC,KAAEC,EAAF,SAAQC,GAA2B,GAC5D,MAAEC,EAAOC,MAAOtB,GAASmB,EAAKI,QAC7BC,KAAcC,GAAcJ,EAC7BK,EAAc1B,EAAK2B,MAAK,CAACC,EAAGC,IAAMA,EAAEC,MAAQF,EAAEE,QAAO1B,KAAI,QAAC,IAAEC,GAAH,SAAaA,KAE5E,OACE,SAAC,IAAD,MACE,SAAC,IAAD,CAAKf,MAAM,oDAEX,SAACiB,EAAD,MACE,SAAC,IAAD,CAAQa,SAAUA,MAGpB,SAAC,KAAD,MACE,SAACT,EAAD,MACE,SAACK,EAAD,MACE,wCACA,SAAC,IAAD,CAAMhB,KAAM0B,EAAazB,sBAAoB,MAG/C,SAACa,EAAD,MACE,SAACC,EAAD,gBACA,SAAC,IAAD,CAAa7B,YAAasC,EAAUtC,YAAaD,OAAQuC,EAAUvC,YAIvE,SAACgC,EAAD,KACGQ,EAAWrB,KAAI,QAAC,YAAElB,EAAF,OAAeD,GAAhB,SACd,SAAC,IAAD,CAAaqB,IAAKrB,EAAOI,KAAMH,YAAaA,EAAaD,OAAQA","file":"component---src-pages-index-tsx-49fab5fcce2fa56b6910.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from '@emotion/styled';\n\ntype PostExcerptProps = {\n  fields: {\n    slug: string;\n  };\n  frontmatter: {\n    title: string;\n    isoDate: string;\n    date: string;\n    intro: string;\n  };\n};\n\nconst Title = styled.h3`\n  margin-top: 0;\n  font-size: var(--text-size-beta);\n  line-height: var(--text-line-height-beta);\n\n  a {\n    color: var(--color-text);\n\n    &:active {\n      color: var(--color-text-invert);\n    }\n  }\n`;\n\nconst Excerpt = styled.p`\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 4;\n`;\n\nexport default function PostExcerpt({ fields, frontmatter }: PostExcerptProps) {\n  return (\n    <article>\n      <header>\n        <Title>\n          <Link to={fields.slug}>{frontmatter.title}</Link>\n        </Title>\n        <time dateTime={frontmatter.isoDate}>{frontmatter.date}</time>\n      </header>\n      <Excerpt dangerouslySetInnerHTML={{ __html: frontmatter.intro }} />\n    </article>\n  );\n}\n","import React from 'react';\nimport styled from '@emotion/styled';\nimport { Link } from 'gatsby';\n\ntype TagsProps = {\n  tags?: string[];\n  canNavigateToAllTags?: boolean;\n  className?: string;\n};\n\nconst TagList = styled.ul`\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: var(--spacing-md) 0;\n  padding: 0;\n\n  li {\n    margin: 0 var(--spacing-xs) var(--spacing-xs) 0;\n  }\n`;\n\nconst Tag = styled(Link)`\n  background-color: var(--color-link);\n  color: var(--color-link-hover);\n  display: block;\n  padding: 0 var(--spacing-xxs);\n\n  &:hover:not(:active) {\n    background-color: var(--color-text);\n  }\n`;\n\nexport default function Tags({ tags = [], canNavigateToAllTags = false, className }: TagsProps) {\n  if (!tags.length) {\n    return null;\n  }\n\n  return (\n    <TagList className={className}>\n      {tags.map((tag) => (\n        <li key={tag}>\n          <Tag to={`/tags/${tag}/`}>{tag}</Tag>\n        </li>\n      ))}\n      {canNavigateToAllTags ? (\n        <li>\n          <Link to=\"/tags/\">All tags</Link>\n        </li>\n      ) : null}\n    </TagList>\n  );\n}\n","import React from 'react';\nimport { graphql, PageProps } from 'gatsby';\nimport styled from '@emotion/styled';\nimport App from '../components/app';\nimport SEO from '../components/seo';\nimport Header from '../components/header';\nimport Tags from '../components/tags';\nimport PostExcerpt from '../components/post-excerpt';\nimport { contentWrapper, Main } from '../styles/global';\nimport { mediaQuery, sm, md, lg } from '../styles/responsive';\n\ntype HomePageProps = PageProps & {\n  data: {\n    allMdx: {\n      group: {\n        tag: string;\n        count: number;\n      }[];\n      nodes: {\n        fields: {\n          slug: string;\n        };\n        frontmatter: {\n          date: string;\n          isoDate: string;\n          title: string;\n          intro: string;\n        };\n      }[];\n    };\n  };\n};\n\nexport const pageQuery = graphql`\n  query {\n    allMdx(sort: { fields: [frontmatter___date], order: DESC }) {\n      group(field: frontmatter___tags) {\n        tag: fieldValue\n        count: totalCount\n      }\n      nodes {\n        fields {\n          slug\n        }\n        frontmatter {\n          date(formatString: \"MMMM DD, YYYY\")\n          isoDate: date(formatString: \"YYYY-MM-DD\")\n          title\n          intro\n        }\n      }\n    }\n  }\n`;\n\nconst Masthead = styled.div`\n  padding: var(--spacing-sm);\n  height: 100vh;\n  place-content: center;\n  display: flex;\n  flex-direction: column;\n\n  ${mediaQuery(sm)} {\n    padding: var(--spacing-lg);\n  }\n\n  ${mediaQuery(lg)} {\n    padding: 100px;\n  }\n`;\n\nconst LatestPostTagsWrapper = styled.div`\n  ${contentWrapper};\n  display: grid;\n  grid-gap: var(--spacing-sm) 0;\n\n  ${mediaQuery(md)} {\n    grid-template-columns: repeat(12, 1fr);\n    grid-gap: var(--spacing-lg);\n  }\n`;\n\nconst LatestPost = styled.div`\n  background: var(--color-yellow-100);\n  margin-bottom: var(--spacing-sm);\n  padding: var(--spacing-xs);\n  position: relative;\n\n  article p:last-child {\n    margin-bottom: 0;\n  }\n\n  ${mediaQuery(sm)} {\n    h3 {\n      font-size: var(--text-size-alpha);\n      line-height: var(--text-line-height-alpha);\n    }\n  }\n  ${mediaQuery(md)} {\n    background: none;\n    border: var(--spacing-xxs) solid var(--color-link);\n    box-shadow: var(--spacing-xs) var(--spacing-xs) 0 var(--color-link);\n    grid-column: 4 / -1;\n\n    p {\n      font-size: var(--text-size-gamma);\n      line-height: var(--text-line-height-gamma);\n    }\n    article {\n      padding: var(--spacing-md);\n    }\n  }\n`;\n\nconst LatestText = styled.span`\n  background-color: var(--color-link);\n  color: var(--color-text-invert);\n  display: none;\n  font-size: var(--text-size-beta);\n  left: 0;\n  line-height: var(--text-line-height-beta);\n  padding: var(--spacing-xxs) var(--spacing-sm);\n  position: absolute;\n  top: 0;\n\n  ${mediaQuery(md)} {\n    display: inline-block;\n\n    + article {\n      margin-top: var(--spacing-lg);\n    }\n  }\n`;\n\nconst TagsWrapper = styled.div`\n  grid-column: 1 / 4;\n`;\n\nconst Posts = styled.div`\n  ${contentWrapper};\n  display: grid;\n  grid-gap: var(--spacing-sm);\n\n  ${mediaQuery(sm)} {\n    grid-template-columns: repeat(2, 1fr);\n    grid-gap: var(--spacing-md);\n    padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);\n  }\n  ${mediaQuery(md)} {\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: var(--spacing-lg);\n    padding: var(--spacing-xxl) var(--spacing-xxl) 0 var(--spacing-xxl);\n  }\n`;\n\nexport default function HomePage({ data, location }: HomePageProps) {\n  const { nodes, group: tags } = data.allMdx;\n  const [firstPost, ...otherPosts] = nodes;\n  const tagsByCount = tags.sort((a, b) => b.count - a.count).map(({ tag }) => tag);\n\n  return (\n    <App>\n      <SEO title=\"Passionate web developer who loves JavaScript!\" />\n\n      <Masthead>\n        <Header location={location} />\n      </Masthead>\n\n      <Main>\n        <LatestPostTagsWrapper>\n          <TagsWrapper>\n            <h4>Search by tag...</h4>\n            <Tags tags={tagsByCount} canNavigateToAllTags />\n          </TagsWrapper>\n\n          <LatestPost>\n            <LatestText>Latest</LatestText>\n            <PostExcerpt frontmatter={firstPost.frontmatter} fields={firstPost.fields} />\n          </LatestPost>\n        </LatestPostTagsWrapper>\n\n        <Posts>\n          {otherPosts.map(({ frontmatter, fields }) => (\n            <PostExcerpt key={fields.slug} frontmatter={frontmatter} fields={fields} />\n          ))}\n        </Posts>\n      </Main>\n    </App>\n  );\n}\n"],"sourceRoot":""}