{"version":3,"sources":["webpack://web-development-blog/./src/components/Button.js","webpack://web-development-blog/./src/components/CarbonAds.js","webpack://web-development-blog/./src/components/SubscribeForm.js","webpack://web-development-blog/./src/templates/article.js"],"names":["Button","render","this","props","text","link","linkType","type","margin","Link","to","className","href","target","rel","React","CarbonAds","ref","useRef","useEffect","container","current","timeout","setTimeout","script","document","createElement","src","async","id","appendChild","clearTimeout","method","action","htmlFor","name","autoComplete","required","placeholder","Template","sourceCodeLink","prevLink","nextLink","data","pageContext","markdownRemark","frontmatter","html","title","subtitle","date","sourceCode","path","featuredImgFluid","image","childImageSharp","gatsbyImageData","imageSrc","previous","next","description","url","G","alt","dangerouslySetInnerHTML","__html"],"mappings":"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","file":"component---src-templates-article-js-dacaa87fdec980a5fc2a.js","sourcesContent":["import React from 'react'\nimport { Link } from 'gatsby'\n\nclass Button extends React.Component {\n  render() {\n    const { text, link, linkType, type, margin } = this.props\n    if (link && linkType === 'internal') {\n      return (\n        <Link to={link}>\n          <button\n            type={type ? type : ''}\n            className={`${\n              margin ? `mx-3` : ``\n            } no-underline inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-primary hover:opacity-90 focus:outline-none\">`}\n          >\n            {text}\n          </button>\n        </Link>\n      )\n    } else if (link && linkType === 'external') {\n      return (\n        <a href={link} target=\"_blank\" rel=\"noopener noreferrer\">\n          <button\n            className={`${\n              margin ? `mx-3` : ``\n            }  no-underline inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-primary hover:opacity-90 focus:outline-none\">`}\n          >\n            {text}\n          </button>\n        </a>\n      )\n    } else {\n      return (\n        <button\n          type={type ? type : ''}\n          className={`${\n            margin ? `mx-3` : ``\n          } no-underline inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-primary hover:opacity-90 focus:outline-none\">`}\n        >\n          {text}\n        </button>\n      )\n    }\n  }\n}\n\nexport default Button\n","import React, { useRef, useEffect } from 'react'\n\nconst CARBON_URL =\n  'https://cdn.carbonads.com/carbon.js?serve=CESDK2QM&placement=stevencotterillcom'\n\nexport const CarbonAds = React.memo(() => {\n  const ref = useRef()\n\n  useEffect(() => {\n    const container = ref.current\n    const timeout = setTimeout(() => {\n      const script = document.createElement('script')\n      script.src = CARBON_URL\n      script.async = true\n      script.id = '_carbonads_js'\n      container.appendChild(script)\n    }, 100)\n\n    return () => clearTimeout(timeout)\n  }, [ref])\n\n  return <div ref={ref}></div>\n})\n","import React from 'react'\n\nconst SubscribeForm = () => (\n  <form\n    method=\"POST\"\n    action=\"https://stevencotterill.us18.list-manage.com/subscribe/post?u=89de3f7692b2e2300565c1665&id=08ec466885\"\n    className=\"w-full mx-auto mt-8\"\n    target=\"_blank\"\n  >\n    <div className=\"text-white p-6 bg-primary rounded-3xl sm:py-16 sm:px-12 lg:p-20 lg:flex lg:items-center\">\n      <div className=\"lg:w-0 lg:flex-1 text-white\">\n        <h2 className=\"text-3xl tracking-tight\">Sign up for my newsletter</h2>\n        <p className=\"mt-4 max-w-3xl text-lg text-white\">\n          Get notified when I post a new article. Unsubscribe at any time, and I\n          promise not to send any spam :)\n        </p>\n      </div>\n      <div className=\"mt-12 sm:w-full sm:max-w-md lg:mt-0 lg:ml-8 md:flex\">\n        <label htmlFor=\"email\" className=\"sr-only\">\n          Email address\n        </label>\n        <input\n          id=\"email\"\n          name=\"EMAIL\"\n          type=\"email\"\n          autoComplete=\"email\"\n          required\n          className=\"w-full border-white px-5 py-3 placeholder-gray-500 focus:outline-none rounded-md\"\n          placeholder=\"Your email\"\n        />\n        <button\n          type=\"submit\"\n          className=\"mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0\"\n        >\n          Sign up\n        </button>\n      </div>\n    </div>\n  </form>\n)\n\nexport default SubscribeForm\n","import React from 'react'\nimport { graphql, Link } from 'gatsby'\nimport Layout from '../components/Layout'\nimport Seo from '../components/Seo'\nimport { GatsbyImage } from 'gatsby-plugin-image'\nimport Button from '../components/Button'\nimport SubscribeForm from '../components/SubscribeForm'\nimport { CarbonAds } from '../components/CarbonAds'\n\nexport default function Template({ data, pageContext }) {\n  const { markdownRemark } = data\n  const { frontmatter, html } = markdownRemark\n  const { title, subtitle, date, sourceCode, path } = frontmatter\n  const featuredImgFluid = frontmatter.image.childImageSharp.gatsbyImageData\n  const imageSrc = featuredImgFluid.src\n  const { previous, next } = pageContext\n\n  let sourceCodeLink\n  if (sourceCode) {\n    sourceCodeLink = (\n      <Button text=\"See on Github\" link={sourceCode} linkType=\"external\" />\n    )\n  }\n\n  let prevLink\n  if (previous) {\n    prevLink = (\n      <Link to={previous.frontmatter.path} className=\"m-2\">\n        &laquo; {previous.frontmatter.title}\n      </Link>\n    )\n  }\n\n  let nextLink\n  if (next) {\n    nextLink = (\n      <Link to={next.frontmatter.path} className=\"m-2\">\n        {next.frontmatter.title} &raquo;\n      </Link>\n    )\n  }\n\n  return (\n    <Layout>\n      <Seo title={title} description={subtitle} image={imageSrc} url={path} />\n      <div className=\"container mt-2 mb-8 py-8\">\n        <GatsbyImage\n          image={featuredImgFluid}\n          alt={title}\n          className=\"w-full rounded-xl shadow-md mb-8\"\n        />\n        <div className=\"text-center mb-8 px-8\">\n          <h1 className=\"font-bold text-3xl\">{title}</h1>\n          <h2 className=\"pt-4 text-xl font-bold mb-5\">{subtitle}</h2>\n          <p>{date}</p>\n        </div>\n        <div className=\"flex justify-center items-center mb-8\">\n          <CarbonAds />\n        </div>\n        <div className=\"prose prose-indigo lg:prose-xl max-w-none\">\n          <div dangerouslySetInnerHTML={{ __html: html }} />\n          {sourceCodeLink}\n          <hr />\n          <div className=\"flex flex-wrap sm:flex-no-wrap justify-between\">\n            {prevLink}\n            {nextLink}\n          </div>\n        </div>\n        <SubscribeForm />\n      </div>\n    </Layout>\n  )\n}\n\nexport const pageQuery = graphql`\n  query($path: String!) {\n    markdownRemark(frontmatter: { path: { eq: $path } }) {\n      html\n      id\n      frontmatter {\n        path\n        image {\n          childImageSharp {\n            gatsbyImageData(width: 800, quality: 100, layout: CONSTRAINED)\n          }\n        }\n        title\n        subtitle\n        date(formatString: \"MMMM YYYY\")\n        sourceCode\n      }\n    }\n  }\n`\n"],"sourceRoot":""}