{"version":3,"sources":["webpack:///./src/components/blog/allArticles/styled.js","webpack:///./src/components/blog/allArticles/index.js","webpack:///./src/components/ui/startUsing/index.js","webpack:///./src/pages/blog.js"],"names":["Section","styled","section","props","deleteMargin","media","tablet","Grid","div","desktop","AllArticles","StyledButton","updates","useState","window","innerWidth","countOfPosts","loadMore","renderRestOfArticles","blogPosts","posts","map","el","idx","key","link","isList","filter","post","group","className","slice","onClick","as","disabled","length","style","opacity","center","defaultProps","StartUsingLS","deleteMarginTop","setMarginTop","useSourceParams","email","setEmail","onSubmit","e","preventDefault","navigate","htmlFor","id","type","name","placeholder","required","value","onChange","target","secondary","StyledSection","StyledHeader","StyledBlogTitle","h1","StyledBlogDesc","p","Box","StyledList","ul","RecentPosts","h2","StyledFirstPost","GuestPostBox","mobile","StyledLink","Blog","metaTitle","canonical","metaDescription","mapArticles","first","author","authorName","avatar","timeToRead","list","renderArticles","href","tag","withArrow"],"mappings":"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","file":"component---src-pages-blog-js-08542e5818864c34e4c6.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport { StyledButton } from 'components/ui/button';\n\nexport const Section = styled.section`\n  padding-top: ${(props) => (props.deleteMargin ? 0 : '3.5rem')};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  .load-more {\n    margin: 80px auto 0;\n    background-color: #fff;\n    color: #0a4ed6;\n    &:hover {\n      background-color: #0a4ed6;\n      color: #fff;\n    }\n    ${media.tablet} {\n      margin: 72px auto 0;\n    }\n  }\n`;\n\nexport const Grid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-column-gap: 40px;\n  grid-row-gap: 40px;\n  ${media.desktop} {\n    grid-template-columns: repeat(2, 1fr);\n    grid-column-gap: 24px;\n  }\n`;\n\nexport const CustomButton = styled(StyledButton)``;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { posts } from 'data/posts';\nimport ArticlePreview from 'components/blog/blogArticlePreview';\nimport Button from 'components/ui/button';\nimport * as Styled from './styled';\n\nconst AllArticles = ({ updates, deleteMargin }) => {\n  const listenResize = () => {\n    if (typeof window !== 'undefined' && window.innerWidth < 992) {\n      return updates ? 8 : 13;\n    }\n    return updates ? 9 : 14;\n  };\n  const [countOfPosts, loadMore] = useState(listenResize());\n\n  const renderRestOfArticles = () => {\n    const blogPosts = posts.map((el, idx) => (\n      <ArticlePreview key={el.link || idx} {...el} isList />\n    ));\n    if (updates) {\n      return blogPosts.filter((post) => post.props.group === 'updates');\n    }\n    return blogPosts.filter((post) => post.props.group !== 'updates');\n  };\n\n  return (\n    <Styled.Section className=\"container\" deleteMargin={deleteMargin}>\n      <Styled.Grid>{renderRestOfArticles().slice(updates ? 0 : 5, countOfPosts)}</Styled.Grid>\n      <Button\n        onClick={() => loadMore(countOfPosts + 6)}\n        as=\"button\"\n        disabled={countOfPosts >= renderRestOfArticles().length}\n        style={{\n          opacity: countOfPosts >= renderRestOfArticles().length && '0.5',\n        }}\n        className=\"load-more\"\n        center\n      >\n        Load more posts\n      </Button>\n    </Styled.Section>\n  );\n};\n\nexport default AllArticles;\n\nAllArticles.propTypes = {\n  updates: PropTypes.bool,\n  deleteMargin: PropTypes.bool,\n};\n\nAllArticles.defaultProps = {\n  updates: false,\n  deleteMargin: false,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useSourceParams } from 'hooks/useSourceParams';\nimport { navigate } from 'gatsby';\nimport * as Styled from './styled';\n\nconst StartUsingLS = ({ deleteMarginTop, setMarginTop }) => {\n  const { link } = useSourceParams('start-using');\n  const [email, setEmail] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    navigate(`${link}&email=${email}`);\n  };\n  return (\n    <Styled.StartUsing\n      className=\"container\"\n      deleteMarginTop={deleteMarginTop}\n      style={{ setMarginTop }}\n    >\n      <h2>\n        Start using LiveSession for free <span>now.</span>\n      </h2>\n      <div className=\"start\">\n        <Styled.ExtendSignUpForm onSubmit={handleSubmit}>\n          <label htmlFor=\"email-form-start-using\" className=\"sign-up-free\">\n            <input\n              id=\"email-form-start-using\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"Your business email\"\n              required\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              className=\"input-email\"\n            />\n          </label>\n          <Styled.CustomButton as=\"button\" type=\"submit\" secondary>\n            Sign up free\n          </Styled.CustomButton>\n        </Styled.ExtendSignUpForm>\n        <div className=\"checkmarks\">\n          <p>Free 14-day trial</p>\n          <p>\n            No credit card <span>required</span>\n          </p>\n          <p>Easy setup</p>\n        </div>\n      </div>\n    </Styled.StartUsing>\n  );\n};\n\nexport default StartUsingLS;\n\nStartUsingLS.propTypes = {\n  deleteMarginTop: PropTypes.bool,\n  // eslint-disable-next-line react/forbid-prop-types\n  setMarginTop: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),\n};\n\nStartUsingLS.defaultProps = {\n  deleteMarginTop: false,\n  setMarginTop: false,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport Layout from 'layout';\nimport ArticlePreview from 'components/blog/blogArticlePreview';\nimport { posts } from 'data/posts';\nimport NewsletterBox from 'components/blog/newsletterBox';\nimport AllArticles from 'components/blog/allArticles';\nimport StartUsing from 'components/ui/startUsing';\nimport CustomLink, { StyledLink } from 'components/ui/link';\n\nexport const StyledSection = styled.section`\n  padding: 13rem 0 2rem;\n  @media (max-width: 1440px) {\n    padding: 8rem 0 2rem;\n  }\n  ${media.tablet} {\n    padding: 120px 0 2rem;\n  }\n`;\n\nexport const StyledHeader = styled.div`\n  margin-bottom: 92px;\n  @media (max-width: 1440px) {\n    margin-bottom: 64px;\n  }\n  ${media.tablet} {\n    margin-bottom: 48px;\n  }\n`;\n\nexport const StyledBlogTitle = styled.h1`\n  margin: 0 0 8px;\n  &.line {\n    span {\n      &::after {\n        background-color: #ffe478;\n      }\n    }\n  }\n\n  ${media.tablet} {\n    font-size: 32px;\n    line-height: 44px;\n    margin: 0 0 6px;\n  }\n`;\n\nexport const StyledBlogDesc = styled.p`\n  font-size: 22px;\n  line-height: 28px;\n  font-weight: 400;\n  ${media.tablet} {\n    font-size: 18px;\n    line-height: 23px;\n  }\n`;\n\nconst Box = styled.div`\n  display: flex;\n  justify-content: space-between;\n  ${media.desktop} {\n    flex-direction: column;\n  }\n`;\n\nconst StyledList = styled.ul`\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  flex-basis: 47%;\n  transform: translateY(-4%);\n  @media (max-width: 1440px) {\n    transform: translateY(0);\n  }\n\n  ${media.desktop} {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-column-gap: 24px;\n    grid-row-gap: 33px;\n    transform: translateY(0);\n    margin-bottom: 0;\n    margin-top: 40px;\n  }\n  ${media.tablet} {\n    margin-top: 0;\n  }\n`;\n\nconst RecentPosts = styled.h2`\n  margin: 0 0 20px;\n  font-size: 36px;\n  font-weight: 800;\n  ${media.desktop} {\n    grid-column: 1 / 3;\n    grid-row: 1 / 2;\n    margin: 0;\n  }\n  ${media.tablet} {\n    font-size: 26px;\n  }\n`;\n\nconst StyledFirstPost = styled.ul`\n  list-style: none;\n  padding: 0;\n  flex-basis: 46%;\n  ${media.tablet} {\n    margin-bottom: 64px;\n  }\n`;\n\nexport const GuestPostBox = styled.section`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 40px;\n  padding: 0;\n  ${media.tablet} {\n    grid-template-columns: repeat(1, 1fr);\n    grid-template-rows: repeat(2, auto);\n    grid-column-gap: 0;\n    grid-row-gap: 32px;\n    align-items: flex-end;\n  }\n  ${media.mobile} {\n    padding: 0 15px;\n  }\n  & .box {\n    display: block;\n    padding: 40px 48px;\n    background-color: #f8f8f8;\n    border-radius: 6px;\n    cursor: pointer;\n    height: fit-content;\n    color: #000;\n    height: 100%;\n    &:hover {\n      text-decoration: none;\n      box-shadow: none;\n      ${StyledLink} {\n        text-decoration: underline;\n        &::after {\n          transform: translateX(8px);\n        }\n      }\n    }\n    ${media.tablet} {\n      height: auto;\n    }\n    ${media.mobile} {\n      padding: 24px 30px;\n    }\n    & h3 {\n      font-size: 26px;\n      line-height: 50px;\n      font-weight: 800;\n      margin-bottom: 24px;\n      ${media.mobile} {\n        margin-bottom: 16px;\n        font-size: 22px;\n        line-height: 32px;\n      }\n    }\n    & p {\n      margin: 0;\n    }\n    & p:first-of-type {\n      font-size: 18px;\n      font-weight: 400;\n      margin-bottom: 32px;\n      ${media.mobile} {\n        margin-bottom: 24px;\n        font-size: 14px;\n        line-height: 24px;\n      }\n    }\n    ${StyledLink} {\n      font-weight: 700;\n      font-size: 16px;\n    }\n  }\n`;\n\nconst Blog = () => {\n  const renderArticles = () => {\n    if (!posts || posts.length === 0) return false;\n    const mapArticles = (first) => {\n      const blogPosts = posts\n        .filter((post) => post.group !== 'updates')\n        .map((el, idx) => (\n          <li key={el.link || idx}>\n            <ArticlePreview\n              {...el}\n              author={{\n                authorName: el.author.authorName,\n                avatar: el.author.avatar,\n              }}\n              timeToRead={el.timeToRead}\n              list={el.group}\n              first={first || null}\n            />\n          </li>\n        ));\n      return blogPosts;\n    };\n\n    return (\n      <StyledSection>\n        <div className=\"container\">\n          <StyledHeader>\n            <StyledBlogTitle className=\"line\">\n              LiveSession <span>blog</span>\n            </StyledBlogTitle>\n            <StyledBlogDesc>UX, conversion, analytics and more</StyledBlogDesc>\n          </StyledHeader>\n          <Box>\n            <StyledFirstPost>{mapArticles(true).slice(0, 1)}</StyledFirstPost>\n            <StyledList>\n              <RecentPosts>Recent posts</RecentPosts>\n              {mapArticles().slice(1, 5)}\n            </StyledList>\n          </Box>\n        </div>\n      </StyledSection>\n    );\n  };\n\n  return (\n    <Layout\n      metaTitle=\"LiveSession Blog | Session Replays, Analytics, UX and CRO\"\n      canonical=\"/blog/\"\n      metaDescription=\"All about session replays and qualitative analytics. Read tips and best practices from UX and CRO experts. Grow your business with the LiveSession blog.\"\n    >\n      {renderArticles()}\n      <NewsletterBox />\n      <AllArticles />\n      <GuestPostBox className=\"container\">\n        <a href=\"/blog/guest-post/\" className=\"box\">\n          <h3>Want to contribute?</h3>\n          <p>We accept guest post submissions!</p>\n          <CustomLink tag=\"p\" withArrow>\n            Find out more\n          </CustomLink>\n        </a>\n        <a href=\"/customers/rocketlink/\" className=\"box\">\n          <h3>110% increase in signups?</h3>\n          <p>Read how RocketLink grew with LiveSession</p>\n          <CustomLink tag=\"p\" withArrow>\n            Learn more\n          </CustomLink>\n        </a>\n      </GuestPostBox>\n      <StartUsing />\n    </Layout>\n  );\n};\n\nexport default Blog;\n"],"sourceRoot":""}