{"version":3,"sources":["articles/components/Code.jsx","serviceWorker.js","constants.js","Header.jsx","articles/components/A.jsx","articles/components/H3.jsx","articles/components/Hero.jsx","articles/components/HomeLink.jsx","articles/imageMappings.js","images/typewriter-illustration.png","articles/components/Image.jsx","articles/components/InlineCode.jsx","articles/components/Li.jsx","articles/components/P.jsx","articles/components/Wrapper.jsx","articles/defaultComponentMapping.js","articles/components/Standout.jsx","articles/posts/automating-local-env-vars/index.jsx","images/articleThumbs/code-block.png","images/articleThumbs/pattern.png","images/articleThumbs/react-logo.png","images/articleThumbs/scream-emoji-banner.png","articles/posts/automating-local-env-vars/metadata.js","images/articleThumbs/styled-components.png","articles/posts/handling-line-endings/index.jsx","articles/posts/handling-line-endings/metadata.js","articles/posts/refactoring-this-site/index.jsx","articles/posts/refactoring-this-site/metadata.js","articles/posts/smart-code-performance/index.jsx","articles/posts/smart-code-performance/metadata.js","articles/articleMetaData.js","homepage/ArticleListItem.jsx","homepage/ArticleList.jsx","Footer.jsx","ScrollToTop.jsx","homepage/Home.jsx","about/Anchor.jsx","about/About.jsx","articles/Articles.jsx","Error404.jsx","index.js"],"names":["global","window","Prism","require","Code","children","language","className","replace","defaultProps","code","theme","dracula","style","tokens","getLineProps","getTokenProps","pop","padding","map","line","i","key","token","Boolean","location","hostname","match","BLOG_ROOT","Header","href","target","title","rel","to","A","rest","H3","props","Hero","color","date","shortTitle","subtitle","author","HomeLink","viewBox","fill","d","imageMappings","typewriter_illustration","Image","resolvedSrc","src","alt","loading","InlineCode","Li","P","Wrapper","defaultComponentMapping","a","blockquote","h3","img","inlineCode","li","p","wrapper","Content","lazy","Post","fallback","components","metadata","content","description","id","imageAlt","imageSrc","Pattern","url","ScreamEmojiBanner","ReactLogo","CodeBlock","articleMetaData","automatingLocalEnvVars","handlingLineEndings","smartCodePerformance","refactoringThisSite","allArticlesMetaData","Object","keys","ArticleListItem","article","ArticleList","articles","articleItems","useMemo","Footer","xmlns","fillRule","clipRule","strokeLinejoin","strokeMiterlimit","ScrollToTop","useEffect","scrollTo","Home","Helmet","Anchor","About","Articles","slug","useParams","name","property","Error404","ReactDOM","render","path","element","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister"],"mappings":"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","file":"static/js/main.9b5e7db3.chunk.js","sourcesContent":["import React from 'react';\nimport Highlight, { defaultProps } from 'prism-react-renderer';\nimport Prism from 'prism-react-renderer/prism';\nimport dracula from 'prism-react-renderer/themes/dracula';\n\n(typeof global !== 'undefined' ? global : window).Prism = Prism;\n\nrequire('prismjs/components/prism-rust');\n\nconst Code = ({ children, className }) => {\n  const language = className.replace(/language-/, '');\n\n  return (\n    <Highlight\n      {...defaultProps}\n      code={children}\n      language={language}\n      theme={dracula}\n    >\n      {({ className, style, tokens, getLineProps, getTokenProps }) => {\n        // not sure why an extra token was being added\n        // removed here\n        tokens.pop();\n\n        return (\n          <pre\n            className={`overflow-x-auto mw7 f7 f6-ns f5-l ${className}`}\n            style={{ ...style, padding: '20px' }}\n          >\n            {tokens.map((line, i) => (\n              <div key={i} {...getLineProps({ line, key: i })}>\n                {line.map((token, key) => (\n                  <span key={key} {...getTokenProps({ token, key })} />\n                ))}\n              </div>\n            ))}\n          </pre>\n        );\n      }}\n    </Highlight>\n  );\n};\n\nexport default Code;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' }\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready.then(registration => {\n      registration.unregister();\n    });\n  }\n}\n","export const DEFAULT_COLOR = 'gold';\nexport const BLOG_ROOT = '/article';\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Header = () => (\n    <nav className=\"pa3 pa4-ns sans-serif\">\n        <h1 className=\"black b f1 f-headline-ns tc ma0 db\">Jon Short</h1>\n        <h2 className=\"f6 gray fw2 tc ttu tracked mt0 mb3 mb4-ns\">Developer</h2>\n        <div className=\"tc pb3\">\n            <a className=\"link dim gray pointer:hover f6 f5-ns dib mr3\" href=\"https://www.github.com/jonshort\" target=\"_blank\" title=\"Github\" rel=\"noopener noreferrer\">Github</a>\n            <a className=\"link dim gray pointer:hover f6 f5-ns dib mr3\" href=\"https://www.twitter.com/altshort\" target=\"_blank\" title=\"Twitter\" rel=\"noopener noreferrer\">Twitter</a>\n            <Link className=\"link dim gray pointer:hover f6 f5-ns dib\" to=\"/about\" title=\"About\">About</Link>\n        </div>\n    </nav>\n);\n\nexport default Header;\n","import React from 'react';\n\nconst A = ({ children, ...rest }) => (\n    <a\n        className=\"hover-blue color-inherit\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        {...rest}\n    >\n        {children}\n    </a>\n);\n\nexport default A;\n","import React from 'react';\n\nconst H3 = props => (\n  <h3 className=\"f3 f2-m mt6 mb4 f-headline-m\">\n    {props.children}\n  </h3>\n);\n\nexport default H3;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { DEFAULT_COLOR } from '../../constants';\n\nconst Hero = (props) => (\n  <header className={`sans-serif dt w-100 bg-${props.color} vh-75 flex`}>\n    <div className=\"mw9 center pa4 pt5-ns ph7-l self-center\">\n      {props.date && (\n        <time className=\"f6 mb2 dib ttu tracked\">\n          <small>{props.date}</small>\n        </time>\n      )}\n      <h3 className=\"f1 f-headline-l measure-narrow lh-title mv0\">\n        <span className=\"bg-black-90 lh-copy white pa1 tracked-tight\">\n          {props.shortTitle || props.title}\n        </span>\n      </h3>\n      {props.subtitle && <h4 className=\"f3 fw1 georgia i\">{props.subtitle}</h4>}\n      <h5 className=\"f6 ttu tracked black-80\">By {props.author}</h5>\n    </div>\n  </header>\n);\n\nHero.propTypes = {\n  author: PropTypes.string,\n  color: PropTypes.string,\n  date: PropTypes.string,\n  shortTitle: PropTypes.string,\n  subtitle: PropTypes.string,\n  title: PropTypes.string,\n};\n\nHero.defaultProps = {\n  author: 'Jon Short',\n  color: DEFAULT_COLOR,\n  date: null,\n  shortTitle: null,\n  subtitle: null,\n  title: null,\n};\n\nexport default Hero;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst HomeLink = () => (\n  <div className=\"bb b--black-10 pt2 pb4\">\n      <Link to=\"/\" className=\"f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box mr4\">\n          <svg className=\"w1\" data-icon=\"chevronLeft\" viewBox=\"0 0 32 32\" style={{fill: 'currentColor'}}>\n              <title>chevronLeft icon</title>\n              <path d=\"M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z\"></path>\n          </svg>\n          <span className=\"pl1\">Return to Home</span>\n      </Link>\n  </div>\n);\n\nexport default HomeLink;\n","import TypewriterIllustration from '../images/typewriter-illustration.png';\n\nconst imageMappings = {\n  typewriter_illustration: TypewriterIllustration,\n};\n\nexport default imageMappings;\n","export default __webpack_public_path__ + \"static/media/typewriter-illustration.8553ad62.png\";","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport imageMappings from '../imageMappings';\n\nconst Image = (props) => {\n  const resolvedSrc = imageMappings[props.src];\n\n  if (!resolvedSrc) {\n    return (\n      <img className=\"pt4 pb4\" src={props.src} alt={props.alt} loading=\"lazy\" />\n    );\n  }\n\n  return <img className=\"pt4 pb4\" src={resolvedSrc} alt={props.alt} />;\n};\n\nImage.propTypes = {\n  children: PropTypes.node,\n};\n\nexport default Image;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst InlineCode = ({ children }) => (\n  <code className=\"hot-pink\">{children}</code>\n);\n\nInlineCode.propTypes = {\n  children: PropTypes.node,\n};\n\nexport default InlineCode;\n","import React from 'react';\n\nconst Li = props => (\n  <li className=\"f5 f3-ns lh-copy measure georgia pv1\">\n    {props.children}\n  </li>\n);\n\nexport default Li;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst P = ({ children }) => (\n    <p className=\"f5 f3-ns lh-copy measure georgia\">{children}</p>\n);\n\nP.propTypes = {\n    children: PropTypes.node,\n};\n\nexport default P;\n","import React from 'react';\n\nconst Wrapper = (props) => <div className=\"t-body\">{props.children}</div>;\n\nexport default Wrapper;\n","import {\n  A,\n  Code,\n  H3,\n  Image,\n  InlineCode,\n  Li,\n  P,\n  Standout,\n  Wrapper,\n} from './components';\n\nconst defaultComponentMapping = {\n  a: A,\n  blockquote: Standout,\n  code: Code,\n  h3: H3,\n  img: Image,\n  inlineCode: InlineCode,\n  li: Li,\n  p: P,\n  wrapper: Wrapper,\n};\n\nexport default defaultComponentMapping;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Standout = (props) => (\n    <blockquote className=\"f5 pv4 b tc bb bt bw1 f3-ns ml0 mv5 lh-copy measure georgia b--black\">{props.children}</blockquote>\n);\n\nStandout.propTypes = {\n    children: PropTypes.node,\n};\n\nexport default Standout;\n","import React, { lazy, Suspense } from 'react';\nimport { importMDX } from 'mdx.macro';\n\nimport defaultComponentMapping from '../../defaultComponentMapping';\n\nconst Content = lazy(() => importMDX('./content.mdx'));\n\nconst Post = () => (\n  <Suspense fallback={<div></div>}>\n    <Content components={defaultComponentMapping} />\n  </Suspense>\n);\n\nexport default Post;\n","export default __webpack_public_path__ + \"static/media/code-block.265fd953.png\";","export default __webpack_public_path__ + \"static/media/pattern.a3fb9556.png\";","export default __webpack_public_path__ + \"static/media/react-logo.939ce98b.png\";","export default __webpack_public_path__ + \"static/media/scream-emoji-banner.346f3694.png\";","import { BLOG_ROOT } from '../../../constants';\n\n// The article\nimport Post from './';\n\n// Images\nimport { Pattern } from '../../../images/articleThumbs';\n\nexport const metadata = {\n  'automating-local-env-vars': {\n    color: 'yellow',\n    content: Post,\n    date: '22 March 2021',\n    description: `\n      Can we improve the experience of using environment variables locally?\n    `,\n    id: '4',\n    imageAlt: 'Tiles in a pattern',\n    imageSrc: Pattern,\n    shortTitle: 'Automating local environment variables',\n    subtitle: `\n      Changing env vars manually can be repetitive\n    `,\n    title: 'Automating local environment variables',\n    url: `${BLOG_ROOT}/automating-local-env-vars`,\n  },\n};\n","export default __webpack_public_path__ + \"static/media/styled-components.d8fa26e8.png\";","import React, { lazy, Suspense } from 'react';\nimport { importMDX } from 'mdx.macro';\n\nimport defaultComponentMapping from '../../defaultComponentMapping';\n\nconst Content = lazy(() => importMDX('./content.mdx'));\n\nconst Post = () => (\n  <Suspense fallback={<div></div>}>\n    <Content components={defaultComponentMapping} />\n  </Suspense>\n);\n\nexport default Post;\n","import { BLOG_ROOT } from '../../../constants';\n\n// The article\nimport Post from './';\n\n// Images\nimport { ScreamEmojiBanner } from '../../../images/articleThumbs';\n\nexport const metadata = {\n  'handling-line-endings': {\n    color: 'washed-red',\n    content: Post,\n    date: '20 August 2020',\n    description: `\n      Dealing with line endings is something that most developers\n      will have to do at some point, and it can be tricky\n    `,\n    id: '3',\n    imageAlt: 'A scream emoji',\n    imageSrc: ScreamEmojiBanner,\n    shortTitle: 'Handling line endings',\n    subtitle: `\n      Let's be honest, line endings are annoying\n    `,\n    title: 'Handling line endings',\n    url: `${BLOG_ROOT}/handling-line-endings`,\n  },\n};\n","import React, { lazy, Suspense } from 'react';\nimport { importMDX } from 'mdx.macro';\n\nimport defaultComponentMapping from '../../defaultComponentMapping';\n\nconst Content = lazy(() => importMDX('./content.mdx'));\n\nconst Post = () => (\n  <Suspense fallback={<div></div>}>\n    <Content components={defaultComponentMapping} />\n  </Suspense>\n);\n\nexport default Post;\n","import { BLOG_ROOT } from '../../../constants';\n\n// The article\nimport Post from './';\n\n// Images\nimport { ReactLogo } from '../../../images/articleThumbs';\n\nexport const metadata = {\n  'refactoring-this-site': {\n    color: 'hot-pink',\n    content: Post,\n    date: '25 January 2020',\n    description: `\n        I created this site in 2017, as a learning exercise for React.\n        Would I approach it differently in 2020?\n    `,\n    id: '1',\n    imageAlt: 'The React logo',\n    imageSrc: ReactLogo,\n    shortTitle: 'Refactoring this site',\n    subtitle: `\n        Looking back at a repo started three years ago\n    `,\n    title: 'Refactoring this site 3 years on',\n    url: `${BLOG_ROOT}/refactoring-this-site`,\n  },\n};\n","import React, { lazy, Suspense } from 'react';\nimport { importMDX } from 'mdx.macro';\n\nimport defaultComponentMapping from '../../defaultComponentMapping';\n\nconst Content = lazy(() => importMDX('./content.mdx'));\n\nconst Post = () => (\n  <Suspense fallback={<div></div>}>\n    <Content components={defaultComponentMapping} />\n  </Suspense>\n);\n\nexport default Post;\n","import { BLOG_ROOT } from '../../../constants';\n\n// The article\nimport Post from './';\n\n// Images\nimport { CodeBlock } from '../../../images/articleThumbs';\n\nexport const metadata = {\n  'smart-code-performance': {\n    color: 'red',\n    content: Post,\n    date: '20 May 2020',\n    description: `\n        Sometimes performance can suffer\n    `,\n    id: '2',\n    imageAlt: 'Generic code block',\n    imageSrc: CodeBlock,\n    shortTitle: \"'Smart' code and performance\",\n    subtitle: `\n      Smart, clean code is better right?\n    `,\n    title: 'Smart, clean code is better right?',\n    url: `${BLOG_ROOT}/smart-code-performance`,\n  },\n};\n","import { metadata as automatingLocalEnvVars } from './posts/automating-local-env-vars/metadata';\nimport { metadata as handlingLineEndings } from './posts/handling-line-endings/metadata';\nimport { metadata as refactoringThisSite } from './posts/refactoring-this-site/metadata';\nimport { metadata as smartCodePerformance } from './posts/smart-code-performance/metadata';\n\nconst articleMetaData = {\n  ...automatingLocalEnvVars,\n  ...handlingLineEndings,\n  ...smartCodePerformance,\n  ...refactoringThisSite,\n};\n\nexport const allArticlesMetaData = Object.keys(articleMetaData).map(\n  (key) => articleMetaData[key]\n);\n\nexport default articleMetaData;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\n\nconst ArticleListItem = ({ article }) => (\n  <article className=\"bt bb b--black-10\">\n    <Link className=\"db pv4 ph3 ph0-l no-underline black dim\" to={article.url}>\n      <div className=\"flex flex-column flex-row-ns\">\n        <div className=\"pr3-ns mb4 mb0-ns w-100 w-40-ns flex items-center\">\n          <img\n            src={article.imageSrc}\n            className=\"db\"\n            alt={article.imageAlt ? article.imageAlt : 'Article image'}\n          />\n        </div>\n        <div className=\"w-100 w-60-ns pl3-ns\">\n          <h1 className=\"f3 fw1 baskerville mt0 lh-title\">{article.title}</h1>\n          <p className=\"f6 f5-l lh-copy\">{article.description}</p>\n          <p className=\"f6 lh-copy mv0\">\n            By {article.author ? article.author : 'Jon Short'}\n          </p>\n        </div>\n      </div>\n    </Link>\n  </article>\n);\n\nArticleListItem.propTypes = {\n  article: PropTypes.object,\n};\n\nexport default ArticleListItem;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types'\n\nimport ArticleListItem from './ArticleListItem';\n\nconst ArticleList = ({ articles }) => {\n    const articleItems = useMemo(() => articles.map(article => (\n        <ArticleListItem article={article} key={article.url} />\n    )), [articles])\n\n    return (\n        <section className=\"mw7 center avenir\">\n            {articleItems}\n        </section>\n    );\n};\n\nArticleList.propTypes = {\n    articles: PropTypes.array\n};\n\nexport default ArticleList;\n","import React from 'react';\n\nconst Footer = () => (\n    <footer className=\"pv4 ph2 tc\">\n        <a className=\"no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2\" href=\"https://github.com/JonShort/jonshort.me\" target=\"_blank\" title=\"GitHub\" rel=\"noopener noreferrer\">\n            <svg className=\"dib h2 w2\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fillRule=\"evenodd\" clipRule=\"evenodd\" strokeLinejoin=\"round\" strokeMiterlimit=\"1.414\"><path d=\"M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8\"/></svg>\n            <span className=\"f6 ml3 pr2\">View on GitHub</span>\n        </a>\n    </footer>\n);\n\nexport default Footer;","import { useEffect } from 'react';\n\nconst ScrollToTop = () => {\n  useEffect(() => {\n    window.scrollTo(0, 0);\n  }, []);\n\n  return null;\n}\n\nexport default ScrollToTop;\n","import React from 'react';\nimport { Helmet } from 'react-helmet';\n\nimport Header from '../Header';\nimport { allArticlesMetaData } from '../articles/articleMetaData';\nimport ArticleList from './ArticleList';\nimport Footer from '../Footer';\nimport ScrollToTop from '../ScrollToTop';\n\nconst Home = () => {\n  return (\n    <>\n      <Helmet>\n        <title key=\"title\">JonShort.me</title>\n      </Helmet>\n      <div className=\"min-vh-100\">\n        <ScrollToTop />\n        <Header />\n        <ArticleList articles={allArticlesMetaData} />\n        <Footer />\n      </div>\n    </>\n  );\n};\n\nexport default Home;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Anchor = props => (\n  <a\n    className=\"f5 fw6 black no-underline underline-hover\"\n    href={props.href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >\n      {props.children}\n  </a>\n);\n\nAnchor.propTypes = {\n  children: PropTypes.node,\n  href: PropTypes.string.isRequired,\n};\n\nexport default Anchor;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\n\nimport Anchor from './Anchor';\n\nconst About = () => {\n  return (\n    <>\n      <Helmet>\n        <title key=\"title\">JonShort.me - About</title>\n      </Helmet>\n      <section className=\"min-vh-100\">\n        <article className=\"cf ph3 ph5-ns pt5 pb3\">\n          <header className=\"fn fl-ns w-50-ns pr4-ns\">\n            <h1 className=\"f2 lh-title fw8 mb3 mt0 pt3 bt bw2\">About</h1>\n            <div className=\"pv2\">\n              <a\n                className=\"link near-black hover-silver dib h2 w2 mr3\"\n                href=\"https://github.com/JonShort\"\n                title=\"GitHub\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <svg\n                  fill=\"currentColor\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 16 16\"\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  strokeLinejoin=\"round\"\n                  strokeMiterlimit=\"1.414\"\n                >\n                  <path d=\"M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8\" />\n                </svg>\n              </a>\n              <a\n                className=\"link hover-silver near-black dib h2 w2 mr3\"\n                href=\"https://twitter.com/altshort\"\n                title=\"Twitter\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <svg\n                  fill=\"currentColor\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 16 16\"\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  strokeLinejoin=\"round\"\n                  strokeMiterlimit=\"1.414\"\n                >\n                  <path\n                    d=\"M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z\"\n                    fillRule=\"nonzero\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </header>\n          <div className=\"fn fl-ns w-50-ns\">\n            <p className=\"f5 lh-copy measure mt0-ns\">\n              I am a full-stack developer at{' '}\n              <Anchor href=\"https://www.experian.co.uk/\">Experian</Anchor>,\n              focusing on best practice, maintainability, and empowering others.\n            </p>\n            <p className=\"f5 lh-copy measure\">\n              I have a few personal projects which I use mostly to learn new\n              tech.{' '}\n              <Anchor href=\"https://github.com/JonShort/cenv\">cenv</Anchor> is\n              one my more useful projects, developed to help developers manage\n              changing env vars within .env files. I wrote an article around the\n              inspiration for this which can be read{' '}\n              <Anchor href=\"/article/automating-local-env-vars\">here</Anchor>.\n            </p>\n            <p className=\"f5 lh-copy measure\">\n              While day-to-day I write mostly Typescript / Javascript, I am a\n              big fan of <Anchor href=\"https://www.rust-lang.org/\">Rust</Anchor>\n              , and have used it for a lot of CLI tooling both personal and\n              within Experian.\n            </p>\n          </div>\n        </article>\n        <div className=\"b--black-10 ph3 ph5-ns pt1 pb4\">\n          <Link\n            to=\"/\"\n            className=\"f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box mr4\"\n          >\n            <svg\n              className=\"w1\"\n              data-icon=\"chevronLeft\"\n              viewBox=\"0 0 32 32\"\n              style={{ fill: 'currentColor' }}\n            >\n              <title>chevronLeft icon</title>\n              <path d=\"M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z\"></path>\n            </svg>\n            <span className=\"pl1\">Return to Home</span>\n          </Link>\n        </div>\n      </section>\n    </>\n  );\n};\n\nexport default About;\n","import React from 'react';\nimport { Navigate, useParams } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\n\n// Components\nimport ScrollToTop from '../ScrollToTop';\nimport Footer from '../Footer';\nimport Hero from './components/Hero';\nimport HomeLink from './components/HomeLink';\n\n// Article data\nimport articleMetaData from './articleMetaData';\n\nconst Articles = () => {\n  const { slug } = useParams();\n\n  const metadata = articleMetaData[slug];\n\n  if (!metadata) {\n    return <Navigate to=\"/404\" />;\n  }\n\n  return (\n    <>\n      <ScrollToTop />\n      <Helmet>\n        <title key=\"title\">JonShort.me - {metadata.title}</title>\n        <meta\n          name=\"description\"\n          content={metadata.description}\n          key=\"description\"\n        />\n        <meta\n          content={`Jonshort.me - ${metadata.title}`}\n          key=\"og:title\"\n          property=\"og:title\"\n        />\n        <meta\n          property=\"og:description\"\n          content={metadata.description}\n          key=\"og:description\"\n        />\n        <meta\n          content={`https://jonshort.me${metadata.url}`}\n          key=\"og:url\"\n          property=\"og:url\"\n        />\n        <meta property=\"og:image\" content={metadata.imageSrc} key=\"og:image\" />\n        <meta\n          property=\"og:image:secure_url\"\n          content={metadata.imageSrc}\n          key=\"og:image:secure_url\"\n        />\n      </Helmet>\n      <article>\n        <Hero\n          author={metadata.author}\n          color={metadata.color}\n          date={metadata.date}\n          shortTitle={metadata.shortTitle}\n          subtitle={metadata.subtitle}\n          title={metadata.title}\n        />\n        <section className=\"pa4 pb0 ph7-l georgia mw9-l center\">\n          <metadata.content />\n          <HomeLink />\n        </section>\n        <Footer />\n      </article>\n    </>\n  );\n};\n\nexport default Articles;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Error404 = () => (\n    <section className=\"bg-washed-blue baskerville\">\n        <header className=\"tc ph5 lh-copy\">\n            <h1 className=\"f1 f-headline-l code mb0 pv3 pb0-l fw9 dib tracked-tight light-red\">404</h1>\n            <h2 className=\"tc f1-l fw1\">I've become lost in the matrix</h2>\n        </header>\n        <div className=\"bb b--black-10 pt2 pb4 flex justify-center\">\n            <Link to=\"/\" className=\"f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box\">\n                <span className=\"pl1\">Return to Home</span>\n            </Link>\n        </div>\n    </section>\n);\n\nexport default Error404;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter, Route, Routes } from 'react-router-dom';\n\n// Service worker\nimport * as serviceWorker from './serviceWorker';\n\n// Constants\nimport { BLOG_ROOT } from './constants';\n\n// General Components\nimport Home from './homepage/Home';\nimport About from './about/About';\nimport Articles from './articles/Articles';\nimport Error404 from './Error404';\n\n// Styles\nimport './index.css';\n\nReactDOM.render(\n  <BrowserRouter>\n    <Routes>\n      <Route path=\"/\" element={<Home />} />\n      <Route path={`${BLOG_ROOT}/:slug`} element={<Articles />} />\n      <Route path=\"/about\" element={<About />} />\n      <Route path=\"*\" element={<Error404 />} />\n    </Routes>\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nserviceWorker.unregister();\n"],"sourceRoot":""}