{"version":3,"sources":["webpack:///./node_modules/@narative/gatsby-theme-novela/src/components/Navigation/Navigation.Paginator.tsx","webpack:///./node_modules/@narative/gatsby-theme-novela/src/components/Bio/Bio.tsx","webpack:///./node_modules/@narative/gatsby-theme-novela/src/sections/articles/Articles.Hero.tsx","webpack:///./node_modules/@narative/gatsby-theme-novela/src/templates/articles.template.tsx"],"names":["Paginator","maxPages","count","props","pageCount","current","index","pageRoot","pathPrefix","getFullPath","n","render","this","previousPath","nextPath","hasNext","hasPrevious","Helmet","rel","href","Frame","PageButton","to","getPageLinks","MobileReference","aria-hidden","previousPage","pagesRange","range","truncatedRange","slice","unshift","splice","length","push","Set","map","page","i","Spacer","key","PageNumberBUtton","style","opacity","className","Component","paginationItemMixin","p","css","theme","colors","primary","mediaqueries","desktop_up","Link","tablet","Bio","author","BioContainer","BioAvatar","as","authorsPage","slug","data-a11y","aria-label","BioAvatarInner","RoundedImage","src","avatar","medium","BioText","dangerouslySetInnerHTML","__html","bio","accent","Image","grey","ArticlesHero","authors","useContext","GridLayoutContext","gridLayout","hasSetGridLayout","setGridLayout","hero","useStaticQuery","site","edges","node","siteMetadata","tilesIsActive","featuredAuthor","find","featured","Error","Section","relative","id","HeadingContainer","maxWidth","HeroHeading","heading","SubheadingContainer","GridControlsContainer","GridButton","onClick","active","title","Tiles","Rows","desktop","phablet","hover","ArticlesGradient","ArticlesPage","location","pageContext","articles","group","additionalContext","Layout","SEO","pathname","narrow","ArticlesPaginator","show","gradient","colorModeTransition"],"mappings":"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","file":"component---node-modules-narative-gatsby-theme-novela-src-templates-articles-template-tsx-9ea4057dc8139a2f9f9a.js","sourcesContent":["import React, { Component } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/core\";\nimport { Link } from \"gatsby\";\nimport { Helmet } from \"react-helmet\";\n\nimport mediaqueries from \"@styles/media\";\nimport { range } from \"@utils\";\n\nimport { IPaginator } from \"@types\";\n\n/**\n * <Paginator />\n *\n * 1 2 3 ... final page NEXT\n * Component to navigate between different pages on a series of blog post, for example.\n *\n * We're using a <nav> element here so make sure to put the pagination component\n * INSIDE of a section to make sure the markup stays contextually relevant\n *\n * Receives the gatsby-paginator props\n */\n\nclass Paginator extends Component<IPaginator, {}> {\n  maxPages = 3;\n  count = this.props.pageCount;\n  current = this.props.index;\n  pageRoot = this.props.pathPrefix;\n\n  get nextPath() {\n    return this.getFullPath(this.current + 1);\n  }\n\n  get previousPath() {\n    return this.getFullPath(this.current - 1);\n  }\n\n  /**\n   * Utility function to return a 1 ... 5 6 7 ... 10 style pagination\n   */\n  get getPageLinks() {\n    const current = this.current;\n    const count = this.count;\n    const maxPages = this.maxPages;\n\n    // Current is the page we're on\n    // We want to show current - 1, current, current + 1\n    // Of course if we're on page 1, we don't want a page 0\n    const previousPage = current === 1 ? current : current - 1;\n\n    // Now create a range of numbers from the previousPage to the total pages (count)\n    const pagesRange = range(previousPage, count + 1 - previousPage);\n\n    // We might need to truncate that pagesRange if it's\n    // more than the max pages we wish to display (3)\n    const truncatedRange: Array<number | null> = pagesRange.slice(0, maxPages);\n\n    // Throughout this function we might add a null to our pages range.\n    // When it comes to rendering our range if we find a null we'll add a spacer.\n\n    // We might need a spacer at the start of the pagination e.g. 1 ... 3 4 5 etc.\n    // If we're after the second page, we need a ... spacer (3 and up)\n    if (pagesRange[0] > 2) {\n      truncatedRange.unshift(null);\n    }\n    // If we're after the first page, we need page 1 to appear (2 and up)\n    if (pagesRange[0] > 1) {\n      truncatedRange.unshift(1);\n    }\n\n    // If we're on the final page, then there won't be a \"next\" page and\n    // the pagination will end up looking a bit short (e.g. on 8 pages ... 7, 8)\n    // Push to the end an extra page maxPages from the end\n    if (pagesRange[0] + 1 === count && pagesRange[0] - 1 > 0) {\n      truncatedRange.splice(\n        pagesRange.length - 1 - maxPages,\n        0,\n        pagesRange[0] - 1,\n      );\n    }\n\n    // We might need a spacer at the end of the pagination e.g. 4 5 6 ... 8\n    // If we're before the penultimate page, we need a ... spacer\n    if (pagesRange[0] + maxPages < count) {\n      truncatedRange.push(null);\n    }\n\n    // If we're before the last page, we need page <last> to appear\n    if (pagesRange[0] + maxPages - 1 < count) {\n      truncatedRange.push(count);\n    }\n\n    return [...new Set(truncatedRange)].map((page: number | null, i) =>\n      page === null ? (\n        // If you find a null in the truncated array then add a spacer\n        <Spacer key={`PaginatorPage_spacer_${i}`} aria-hidden={true} />\n      ) : (\n        // Otherwise render a PageButton\n        <PageNumberBUtton\n          key={`PaginatorPage_${page}`}\n          to={this.getFullPath(page)}\n          style={{ opacity: current === page ? 1 : 0.3 }}\n          className=\"Paginator__pageLink\"\n        >\n          {page}\n        </PageNumberBUtton>\n      ),\n    );\n  }\n\n  /**\n   * Utility to turn an index in to a page path.\n   * All it really does is glue the page path to the front,\n   * but note there's special behaviour for page 1 where the URL should be / not /page/1\n   */\n  getFullPath = (n: number) => {\n    if (this.pageRoot === \"/\") {\n      return n === 1 ? this.pageRoot : this.pageRoot + \"page/\" + n;\n    } else {\n      return n === 1 ? this.pageRoot : this.pageRoot + \"/page/\" + n;\n    }\n  };\n\n  render() {\n    const count = this.count;\n    const current = this.current;\n\n    if (count <= 1) return null;\n\n    const previousPath = this.previousPath;\n    const nextPath = this.nextPath;\n    const hasNext = this.current < this.count;\n    const hasPrevious = this.current > 1;\n\n    return (\n      <>\n        <Helmet>\n          {hasPrevious && <link rel=\"prev\" href={previousPath} />}\n          {hasNext && <link rel=\"next\" href={nextPath} />}\n        </Helmet>\n        <Frame>\n          {hasPrevious && <PageButton to={previousPath}>Prev</PageButton>}\n          {this.getPageLinks}\n          <MobileReference aria-hidden=\"true\">\n            <em>{current}</em>&nbsp;of {count}\n          </MobileReference>\n          {hasNext && <PageButton to={nextPath}>Next</PageButton>}\n        </Frame>\n      </>\n    );\n  }\n}\n\nexport default Paginator;\n\nconst paginationItemMixin = p => css`\n  line-height: 1;\n  color: ${p.theme.colors.primary};\n  padding: 0;\n  width: 6.8rem;\n  height: 6.8rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-variant-numeric: tabular-nums;\n\n  ${mediaqueries.desktop_up`\n    display: block;\n    width: auto;\n    height: auto;\n    padding: 2rem;\n\n    &:first-of-type {\n      padding-left: 0;\n    }\n\n    &:last-child {\n      padding-right: 0;\n    }\n  `}\n`;\n\nconst PageButton = styled(Link)`\n  font-weight: 600;\n  font-size: 18px;\n  text-decoration: none;\n  color: ${p => p.theme.colors.primary};\n  ${paginationItemMixin}\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n    text-decoration: underline;\n  }\n`;\n\nconst PageNumberBUtton = styled(Link)`\n  font-weight: 400;\n  font-size: 18px;\n  text-decoration: none;\n  color: ${p => p.theme.colors.primary};\n  ${paginationItemMixin}\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n    text-decoration: underline;\n  }\n`;\n\nconst Spacer = styled.span`\n  opacity: 0.3;\n  ${paginationItemMixin}\n  &::before {\n    content: \"...\";\n  }\n`;\n\nconst MobileReference = styled.span`\n  font-weight: 400;\n  ${paginationItemMixin}\n  color: ${p => p.theme.colors.primary};\n\n  em {\n    font-style: normal;\n    color: ${p => p.theme.colors.primary};\n  }\n`;\n\nconst Frame = styled.nav`\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ${mediaqueries.tablet`\n    .Paginator__pageLink, ${Spacer} { display: none; }\n    left: -15px;\n  `}\n\n  ${mediaqueries.desktop_up`\n    justify-content: flex-start;\n    ${MobileReference} { display: none; }\n  `}\n`;\n","import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from '@emotion/styled';\n\nimport Image from '@components/Image';\nimport { IAuthor } from '@types';\n\nconst Bio: React.FC<IAuthor> = ({ author }) => {\n  return (\n    <BioContainer>\n      <BioAvatar\n        as={author.authorsPage ? Link : 'div'}\n        to={author.slug}\n        data-a11y=\"false\"\n        aria-label=\"Author's bio\"\n      >\n        <BioAvatarInner>\n          <RoundedImage src={author.avatar.medium} />\n        </BioAvatarInner>\n      </BioAvatar>\n      <BioText dangerouslySetInnerHTML={{ __html: author.bio }} />\n    </BioContainer>\n  );\n};\n\nexport default Bio;\n\nconst BioContainer = styled.div`\n  display: flex;\n  align-items: center;\n  position: relative;\n  left: -10px;\n`;\n\nconst BioAvatar = styled.div`\n  display: block;\n  position: relative;\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.25);\n  margin-right: 16px;\n  margin: 10px 26px 10px 10px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: -5px;\n    top: -5px;\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.25);\n  }\n\n  &[data-a11y='true']:focus::after {\n    content: '';\n    position: absolute;\n    left: -5px;\n    top: -5px;\n    width: 50px;\n    height: 50px;\n    border: 2px solid ${p => p.theme.colors.accent};\n  }\n`;\n\nconst RoundedImage = styled(Image)`\n  border-radius: 50%;\n`;\n\nconst BioAvatarInner = styled.div`\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.25);\n  margin-right: 16px;\n  overflow: hidden;\n`;\n\nconst BioText = styled.p`\n  max-width: 430px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: ${p => p.theme.colors.grey};\n\n  a {\n    color: ${p => p.theme.colors.grey};\n    text-decoration: underline;\n  }\n`;\n","import React, { useContext } from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport styled from '@emotion/styled';\n\nimport Section from '@components/Section';\nimport Bio from '@components/Bio';\nimport Icons from '@icons';\nimport mediaqueries from '@styles/media';\nimport { IAuthor } from '@types';\n\nimport { GridLayoutContext } from './Articles.List.Context';\n\nconst authorQuery = graphql`\n  {\n    site: allSite {\n      edges {\n        node {\n          siteMetadata {\n            hero {\n              heading\n              maxWidth\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst ArticlesHero: React.FC<IAuthor> = ({ authors }) => {\n  const { gridLayout = 'tiles', hasSetGridLayout, setGridLayout } = useContext(\n    GridLayoutContext,\n  );\n\n  const results = useStaticQuery(authorQuery);\n  const hero = results.site.edges[0].node.siteMetadata.hero;\n  const tilesIsActive = hasSetGridLayout && gridLayout === 'tiles';\n  const featuredAuthor = authors.find(author => author.featured);\n\n  if (!featuredAuthor) {\n    throw new Error(`\n      No featured Author found.\n      Please ensure you have at least featured Author.\n  `);\n  }\n\n  return (\n    <Section relative id=\"Articles__Hero\">\n      <HeadingContainer style={{ maxWidth: `${hero.maxWidth}px` }}>\n        <HeroHeading dangerouslySetInnerHTML={{ __html: hero.heading }} />\n      </HeadingContainer>\n      <SubheadingContainer>\n        <Bio author={featuredAuthor} />\n        <GridControlsContainer>\n          <GridButton\n            onClick={() => setGridLayout('tiles')}\n            active={tilesIsActive}\n            data-a11y=\"false\"\n            title=\"Show articles in Tile grid\"\n            aria-label=\"Show articles in Tile grid\"\n          >\n            <Icons.Tiles />\n          </GridButton>\n          <GridButton\n            onClick={() => setGridLayout('rows')}\n            active={!tilesIsActive}\n            data-a11y=\"false\"\n            title=\"Show articles in Row grid\"\n            aria-label=\"Show articles in Row grid\"\n          >\n            <Icons.Rows />\n          </GridButton>\n        </GridControlsContainer>\n      </SubheadingContainer>\n    </Section>\n  );\n};\n\nexport default ArticlesHero;\n\nconst SubheadingContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 100px;\n\n  ${mediaqueries.desktop`\n    margin-bottom: 80px;\n  `};\n\n  ${mediaqueries.tablet`\n    margin-bottom: 60px;\n  `};\n\n  ${mediaqueries.phablet`\n    display: none;\n  `};\n`;\n\nconst GridControlsContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${mediaqueries.tablet`\n    display: none;\n  `};\n`;\n\nconst HeadingContainer = styled.div`\n  margin: 100px 0;\n\n  ${mediaqueries.desktop`\n    width: 80%;\n  `}\n\n  ${mediaqueries.tablet`\n    width: 100%;\n  `}\n`;\n\nconst HeroHeading = styled.h1`\n  font-style: normal;\n  font-weight: 600;\n  font-size: 52px;\n  line-height: 1.15;\n  color: ${p => p.theme.colors.primary};\n\n  a {\n    color: ${p => p.theme.colors.accent};\n  }\n\n  ${mediaqueries.desktop`\n    font-size: 38px\n  `}\n\n  ${mediaqueries.phablet`\n    font-size: 32px;\n  `}\n`;\n\nconst GridButton = styled.button<{ active: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  width: 36px;\n  border-radius: 50%;\n  background: transparent;\n  transition: background 0.25s;\n\n  &:not(:last-child) {\n    margin-right: 30px;\n  }\n\n  &:hover {\n    background: ${p => p.theme.colors.hover};\n  }\n\n  &[data-a11y='true']:focus::after {\n    content: '';\n    position: absolute;\n    left: -10%;\n    top: -10%;\n    width: 120%;\n    height: 120%;\n    border: 2px solid ${p => p.theme.colors.accent};\n    background: rgba(255, 255, 255, 0.01);\n    border-radius: 50%;\n  }\n\n  svg {\n    opacity: ${p => (p.active ? 1 : 0.25)};\n    transition: opacity 0.2s;\n\n    path {\n      fill: ${p => p.theme.colors.primary};\n    }\n  }\n`;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport Section from \"@components/Section\";\nimport SEO from \"@components/SEO\";\nimport Layout from \"@components/Layout\";\nimport Paginator from \"@components/Navigation/Navigation.Paginator\";\n\nimport ArticlesHero from \"../sections/articles/Articles.Hero\";\nimport ArticlesList from \"../sections/articles/Articles.List\";\n\nimport { Template } from \"@types\";\n\nconst ArticlesPage: Template = ({ location, pageContext }) => {\n  const articles = pageContext.group;\n  const authors = pageContext.additionalContext.authors;\n\n  return (\n    <Layout>\n      <SEO pathname={location.pathname} />\n      <ArticlesHero authors={authors} />\n      <Section narrow>\n        <ArticlesList articles={articles} />\n        <ArticlesPaginator show={pageContext.pageCount > 1}>\n          <Paginator {...pageContext} />\n        </ArticlesPaginator>\n      </Section>\n      <ArticlesGradient />\n    </Layout>\n  );\n};\n\nexport default ArticlesPage;\n\nconst ArticlesGradient = styled.div`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 590px;\n  z-index: 0;\n  pointer-events: none;\n  background: ${p => p.theme.colors.gradient};\n  transition: ${p => p.theme.colorModeTransition};\n`;\n\nconst ArticlesPaginator = styled.div<{ show: boolean }>`\n  ${p => p.show && `margin-top: 95px;`}\n`;\n"],"sourceRoot":""}