{"version":3,"file":"component---src-templates-tags-js-3dc6a6c4bf34783a363f.js","mappings":"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","sources":["webpack://SlatePages/./src/templates/tags.js"],"sourcesContent":["import React from 'react'\nimport { graphql, navigate } from \"gatsby\";\nimport Layout from \"../components/layout/layout\";\nimport cx from \"classnames\";\nimport { LINKS } from \"../constants/links\";\nimport {\n  Typography as MuiTypography,\n  Grid, CircularProgress,\n} from \"@material-ui/core\";\nimport { makeStyles, styled } from \"@material-ui/core/styles\";\nimport { spacing } from \"@material-ui/system\";\nimport Pagination from \"@material-ui/lab/Pagination\";\n\nconst Typography = styled(MuiTypography)(spacing);\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      marginTop: theme.spacing(2),\n    },\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    flex: 'auto',\n    zIndex: 100,\n    maxWidth: 1060,\n    width: '100%',\n    margin: 'auto',\n    padding: '0 50px',\n    marginBottom: 100,\n  },\n  articlesContainer: {\n    marginTop: 64,\n  },\n  headerContainer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  articleContainer: {\n    cursor: \"pointer\",\n  },\n  previewImage: {\n    height: 'auto',\n    width: '100%',\n    zIndex: 2,\n    transition: 'display 1s ease 2s',\n    backgroundColor: 'white',\n  },\n  previewImageContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: '100%',\n    aspectRatio: 2.4,\n    overflow: 'hidden',\n    marginBottom: 18,\n    borderRadius: 10,\n    willChange: 'transform',\n  },\n  spinnerImage: {\n    color: \"#f15a29\",\n    position: 'absolute',\n  },\n  articleTitle: {\n    color: \"#f15a29\",\n    textDecoration: 'none',\n    marginBottom: 5,\n    marginTop: 0,\n  },\n  articleCreated: {\n    fontSize: '.725rem',\n    letterSpacing: 1,\n    marginBottom: 20,\n  },\n  shortDescription: {\n    fontSize: '.96rem',\n    marginBottom: 20,\n  },\n  articleContent: {\n    fontSize: '1rem',\n  },\n  articleLink: {\n    color: \"#f15a29\",\n    textDecoration: 'none',\n  },\n}));\n\nexport const pageQuery = graphql`\n  query($blogArticlesLimit: Int!, $blogArticlesSkip: Int!, $caseStudiesArticlesLimit: Int!, $caseStudiesArticlesSkip: Int!, $id: String!, $strapiId: Int!) {\n    strapiTag(id: {eq: $id}) {\n      title\n    }\n    allStrapiArticle(\n      filter: {tags: {elemMatch: {id: {eq: $strapiId}}}}\n      sort: {fields: created_at, order: DESC},\n      skip: $blogArticlesSkip,\n      limit: $blogArticlesLimit\n    ) {\n      edges {\n        node {\n          title\n          slug\n          shortDescription\n          image\n          id\n          created_at\n          content\n          author {\n            username\n          }\n        }\n      }\n    }\n    allStrapiCaseStudiesArticles(\n      filter: {tags: {elemMatch: {id: {eq: $strapiId}}}}\n      sort: {fields: created_at, order: DESC},\n      skip: $caseStudiesArticlesSkip,\n      limit: $caseStudiesArticlesLimit\n    ) {\n      edges {\n        node {\n          Title\n          slug\n          shortDescription\n          image\n          id\n          created_at\n          content\n        }\n      }\n    }\n  }\n`;\n\n\nconst UserTemplate = ({ data, pageContext }) => {\n  const classes = useStyles();\n  const allStrapiArticle = data.allStrapiArticle.edges.map((item) => {\n    item.node.source = LINKS.blogArticle;\n    return item;\n  });\n  const allStrapiCaseStudiesArticles = data.allStrapiCaseStudiesArticles.edges.map((item) => {\n    item.node.source = LINKS.caseStudiesArticle;\n    item.node.title = item.node.Title;\n    return item;\n  });\n\n  const posts = [...allStrapiArticle, ...allStrapiCaseStudiesArticles,];\n\n  const changePage = (event, page) => {\n    navigate(`${LINKS.tags}${pageContext.title}${page !== 1 ? `/pages/${page}/` : ''}`);\n  };\n\n  const openArticle = event => {\n    navigate(`${event.currentTarget.dataset.source}/${(!!event.currentTarget.dataset.slug\n      ? event.currentTarget.dataset.slug\n      : event.currentTarget.dataset.title)\n      .replaceAll(' ', '-').toLowerCase()}/`);\n  }\n\n  return <Layout SeoProps={{\n    title: 'Blog',\n    description: 'blog',\n  }}>\n    <div className={classes.container}>\n      <div className={classes.headerContainer}>\n        <Typography variant=\"h2\">\n          {data.strapiTag.title}\n        </Typography>\n        {\n          pageContext.numPages > 1 &&\n          <Pagination\n            count={pageContext.numPages}\n            onChange={changePage}\n            defaultPage={pageContext.currentPage}\n            shape=\"rounded\"\n            hidePrevButton\n            hideNextButton\n            color=\"primary\"\n          />\n        }\n      </div>\n      <Grid container spacing={2} className={classes.articlesContainer}>\n        {posts.map(( _post) => {\n          const post = _post.node;\n          //date\n          const date = new Date(post.created_at).toLocaleDateString('en-US', {\n            day: '2-digit',\n            month: '2-digit',\n            year: 'numeric',\n            timeZone: 'UTC',\n          })\n\n          //image\n          let imageFixed = post.image;\n\n          if (!imageFixed) {\n            const regex = /!\\[.*?\\]\\(.*?\\)/gm;\n            const found = post.content.match(regex);\n            if (found && found.length) {\n              imageFixed = found[0].split('(')[1].slice(0, -1);\n            }\n          }\n\n\n          //short description\n          let shortDescription = post.shortDescription\n          // ToDo: clear markdown syntax\n          if (!post.shortDescription) {\n            const removeHeader = post.content.split('#');\n            const text = removeHeader[0].length > 100 ?\n              removeHeader[0] :\n              removeHeader[1] && removeHeader[1].length > 100 ?\n                removeHeader[1] :\n                (removeHeader[2] && removeHeader[2]) || removeHeader[0]\n            shortDescription = text.slice(0, 300).trim() + '...';\n          }\n\n          return <Grid item md={4} xs={12} sm={6}\n                       key={post.id}\n                       data-id={post.id}\n                       data-slug={post.slug}\n                       data-title={post.title}\n                       data-source={post.source}\n                       className={classes.articleContainer}\n                       onClick={openArticle}\n          >\n            {\n              imageFixed && <div className={classes.previewImageContainer}>\n                <CircularProgress className={classes.spinnerImage}/>\n                <img src={imageFixed} alt=\"preview image\" className={classes.previewImage} />\n              </div>\n            }\n            <h2 className={classes.articleTitle}>\n              {post.title}\n            </h2>\n            <Typography className={cx(classes.typography, classes.articleCreated)}>\n              {date}\n            </Typography>\n            <Typography className={cx(classes.typography, classes.shortDescription)}>\n              {shortDescription}\n            </Typography>\n            <Typography className={classes.articleTitle}>\n              Continue reading...\n            </Typography>\n          </Grid>\n        })}\n      </Grid>\n    </div>\n  </Layout>\n}\n\nexport default UserTemplate\n"],"names":["Typography","styled","MuiTypography","spacing","useStyles","makeStyles","theme","root","marginTop","container","display","flexDirection","height","flex","zIndex","maxWidth","width","margin","padding","marginBottom","articlesContainer","headerContainer","justifyContent","articleContainer","cursor","previewImage","transition","backgroundColor","previewImageContainer","alignItems","aspectRatio","overflow","borderRadius","willChange","spinnerImage","color","position","articleTitle","textDecoration","articleCreated","fontSize","letterSpacing","shortDescription","articleContent","articleLink","_ref","data","pageContext","classes","allStrapiArticle","edges","map","item","node","source","LINKS","blogArticle","allStrapiCaseStudiesArticles","caseStudiesArticle","title","Title","posts","concat","_toConsumableArray","openArticle","event","navigate","currentTarget","dataset","slug","replaceAll","toLowerCase","React","Layout","SeoProps","description","className","variant","strapiTag","numPages","Pagination","count","onChange","changePage","page","tags","defaultPage","currentPage","shape","hidePrevButton","hideNextButton","Grid","_post","post","date","Date","created_at","toLocaleDateString","day","month","year","timeZone","imageFixed","image","regex","found","content","match","length","split","slice","removeHeader","trim","md","xs","sm","key","id","onClick","CircularProgress","src","alt","cx","typography"],"sourceRoot":""}