component---src-templates-article-js-6b21d23940ec3529455c.js.map

{"version":3,"sources":["webpack:///./node_modules/gatsby-plugin-mdx/index.js","webpack:///./node_modules/lodash/isObject.js","webpack:///./node_modules/lodash/dropRight.js","webpack:///./node_modules/lodash/toInteger.js","webpack:///./src/templates/article.js","webpack:///./node_modules/gatsby-plugin-mdx/mdx-renderer.js","webpack:///./node_modules/lodash/toFinite.js","webpack:///./node_modules/@babel/runtime/helpers/isNativeReflectConstruct.js","webpack:///./node_modules/@babel/runtime/helpers/construct.js","webpack:///./node_modules/lodash/toNumber.js"],"names":["MDXRenderer","require","module","exports","value","type","baseSlice","toInteger","array","n","guard","length","undefined","toFinite","result","remainder","ArticleTemplate","article","data","mdx","fields","slug","github","showToc","frontmatter","React","useState","isVisibleToc","setIsVisibleToc","breadCrumbs","dropRight","split","reduce","breadcrumbArray","path","idx","name","to","replace","description","excerpt","title","timeToRead","categories","tocData","tableOfContents","sx","mt","map","index","display","m","paddingRight","key","opacity","justifyContent","mb","fontSize","lineHeight","letterSpacing","div","initial","animate","exit","position","zIndex","overflowY","width","height","top","left","background","p","pb","hideTitle","pageTitle","setState","body","pageQuery","useMDXScope","scope","children","props","mdxScope","End","fullScope","keys","Object","values","fn","toNumber","Reflect","construct","sham","Proxy","Date","prototype","toString","call","e","setPrototypeOf","isNativeReflectConstruct","_construct","Parent","args","Class","a","push","apply","instance","Function","bind","arguments","isObject","isSymbol","reTrim","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","other","valueOf","isBinary","test","slice"],"mappings":"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","file":"component---src-templates-article-js-6b21d23940ec3529455c.js","sourcesContent":["/**\n * Welcome to gatsby-plugin-mdx!\n *\n * Start reading in gatsby-node.js\n */\n\nconst MDXRenderer = require(`./mdx-renderer`)\n\nmodule.exports = {\n  MDXRenderer: MDXRenderer,\n}\n","/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n  var type = typeof value;\n  return value != null && (type == 'object' || type == 'function');\n}\n\nmodule.exports = isObject;\n","var baseSlice = require('./_baseSlice'),\n    toInteger = require('./toInteger');\n\n/**\n * Creates a slice of `array` with `n` elements dropped from the end.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=1] The number of elements to drop.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.dropRight([1, 2, 3]);\n * // => [1, 2]\n *\n * _.dropRight([1, 2, 3], 2);\n * // => [1]\n *\n * _.dropRight([1, 2, 3], 5);\n * // => []\n *\n * _.dropRight([1, 2, 3], 0);\n * // => [1, 2, 3]\n */\nfunction dropRight(array, n, guard) {\n  var length = array == null ? 0 : array.length;\n  if (!length) {\n    return [];\n  }\n  n = (guard || n === undefined) ? 1 : toInteger(n);\n  n = length - n;\n  return baseSlice(array, 0, n < 0 ? 0 : n);\n}\n\nmodule.exports = dropRight;\n","var toFinite = require('./toFinite');\n\n/**\n * Converts `value` to an integer.\n *\n * **Note:** This method is loosely based on\n * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toInteger(3.2);\n * // => 3\n *\n * _.toInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toInteger(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toInteger('3.2');\n * // => 3\n */\nfunction toInteger(value) {\n  var result = toFinite(value),\n      remainder = result % 1;\n\n  return result === result ? (remainder ? result - remainder : result) : 0;\n}\n\nmodule.exports = toInteger;\n","/** @jsx jsx */\nimport { jsx } from \"theme-ui\";\nimport { Flex } from \"@theme-ui/components\";\nimport React from \"react\";\nimport { graphql } from \"gatsby\";\nimport Link from \"../components/link\";\nimport { MDXRenderer } from \"gatsby-plugin-mdx\";\nimport Layout from \"../components/layout\";\nimport dropRight from \"lodash/dropRight\";\nimport defaultShareCard from \"../images/social-card.png\";\nimport TableOfContents, { TocToggle } from \"../components/toc\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nrequire(\"prismjs/themes/prism-coy.css\");\n\nconst ArticleTemplate = ({ data }) => {\n  const article = data.mdx;\n  const { slug, github } = article.fields;\n  const showToc = article.frontmatter.showToc;\n  const [isVisibleToc, setIsVisibleToc] = React.useState(false);\n\n  const breadCrumbs = dropRight(\n    dropRight(\n      slug.split(\"/\").reduce((breadcrumbArray, path, idx) => {\n        return [\n          ...breadcrumbArray,\n          {\n            name: path,\n            to: breadcrumbArray[idx - 1]\n              ? `${breadcrumbArray[idx - 1].to}/${path}`.replace(\"//\", \"/\")\n              : path\n          }\n        ];\n      }, [])\n    )\n  );\n\n  const description = article.frontmatter.description || article.excerpt;\n\n  return (\n    <Layout\n      title={article.frontmatter.title}\n      description={description}\n      github={github}\n      timeToRead={article.timeToRead}\n      categories={article.frontmatter.categories}\n      slug={article.fields.slug}\n      showToc={showToc}\n      tocData={article.tableOfContents}\n    >\n      {breadCrumbs.length > 1 && (\n        <nav sx={{ mt: [3, 4] }}>\n          {breadCrumbs.map((path, index) => {\n            if (path.to === slug) return null;\n            return (\n              <span\n                sx={{ display: \"inline-block\", m: 0, paddingRight: \"5px\" }}\n                key={path.name}\n              >\n                {index !== breadCrumbs.length ? (\n                  <Link to={path.to}>{path.name}</Link>\n                ) : (\n                  path.name\n                )}\n                {/* {index < breadCrumbs.length  && '→'} */}\n                <span sx={{ opacity: 0.3 }}>\n                  {path.name && index !== breadCrumbs.length && \" / \"}\n                </span>\n              </span>\n            );\n          })}\n        </nav>\n      )}\n      <Flex sx={{ justifyContent: \"space-between\", mb: 4 }}>\n        {article.frontmatter.title && (\n          <h1\n            sx={{\n              fontSize: [5, 5, 6],\n              lineHeight: \"normal\",\n              letterSpacing: \"normal\",\n              mt: breadCrumbs.length > 1 ? 1 : [4, 5],\n              mb: 0\n            }}\n          >\n            {article.frontmatter.title}\n          </h1>\n        )}\n        {showToc && (\n          <TocToggle\n            isVisibleToc={isVisibleToc}\n            setIsVisibleToc={setIsVisibleToc}\n          />\n        )}\n      </Flex>\n      <div sx={{ \"h1:first-of-type\": { mt: [3, 5] } }}>\n        <AnimatePresence>\n          {showToc && isVisibleToc && (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              sx={{\n                position: \"fixed\",\n                zIndex: 5,\n                overflowY: \"auto\",\n                width: \"100%\",\n                height: \"100%\",\n                top: [60, 80],\n                left: 0,\n                background: \"white\",\n                p: 3,\n                pb: 5,\n                display: [\"block\", \"block\", \"none\"]\n              }}\n            >\n              <motion.div\n                initial={{ top: 25 }}\n                animate={{ top: 0 }}\n                exit={{ top: 25 }}\n                sx={{\n                  width: \"100%\",\n                  position: \"relative\"\n                }}\n              >\n                <TableOfContents\n                  data={article.tableOfContents}\n                  hideTitle\n                  pageTitle={article.frontmatter.title}\n                  slug={article.fields.slug}\n                  sx={{ top: 4, p: 0, opacity: 1, fontSize: \"17px\" }}\n                  setState={setIsVisibleToc}\n                />\n              </motion.div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <MDXRenderer>{article.body}</MDXRenderer>\n      </div>\n    </Layout>\n  );\n};\n\nexport default ArticleTemplate;\n\nexport const pageQuery = graphql`\n  query ArticleQuery($id: String) {\n    mdx(id: { eq: $id }) {\n      id\n      excerpt(pruneLength: 250)\n      body\n      timeToRead\n      tableOfContents\n      fields {\n        slug\n        guide\n        github\n      }\n      frontmatter {\n        title\n        categories\n        showToc\n      }\n    }\n  }\n`;\n","const React = require(`react`)\nconst { mdx } = require(`@mdx-js/react`)\nconst { useMDXScope } = require(`./context`)\n\nmodule.exports = function MDXRenderer({\n  scope,\n  children,\n  ...props\n}) {\n  const mdxScope = useMDXScope(scope)\n\n  // Memoize the compiled component\n  const End = React.useMemo(() => {\n    if (!children) {\n      return null\n    }\n\n    const fullScope = {\n      // React is here just in case the user doesn't pass them in\n      // in a manual usage of the renderer\n      React,\n      mdx,\n      ...mdxScope,\n    }\n\n    const keys = Object.keys(fullScope)\n    const values = keys.map(key => fullScope[key])\n    const fn = new Function(`_fn`, ...keys, `${children}`)\n\n    return fn({}, ...values)\n  }, [children, scope])\n\n  return React.createElement(End, {...props })\n}\n","var toNumber = require('./toNumber');\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0,\n    MAX_INTEGER = 1.7976931348623157e+308;\n\n/**\n * Converts `value` to a finite number.\n *\n * @static\n * @memberOf _\n * @since 4.12.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted number.\n * @example\n *\n * _.toFinite(3.2);\n * // => 3.2\n *\n * _.toFinite(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toFinite(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toFinite('3.2');\n * // => 3.2\n */\nfunction toFinite(value) {\n  if (!value) {\n    return value === 0 ? value : 0;\n  }\n  value = toNumber(value);\n  if (value === INFINITY || value === -INFINITY) {\n    var sign = (value < 0 ? -1 : 1);\n    return sign * MAX_INTEGER;\n  }\n  return value === value ? value : 0;\n}\n\nmodule.exports = toFinite;\n","function _isNativeReflectConstruct() {\n  if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n  if (Reflect.construct.sham) return false;\n  if (typeof Proxy === \"function\") return true;\n\n  try {\n    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nmodule.exports = _isNativeReflectConstruct;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nvar isNativeReflectConstruct = require(\"./isNativeReflectConstruct\");\n\nfunction _construct(Parent, args, Class) {\n  if (isNativeReflectConstruct()) {\n    module.exports = _construct = Reflect.construct;\n  } else {\n    module.exports = _construct = function _construct(Parent, args, Class) {\n      var a = [null];\n      a.push.apply(a, args);\n      var Constructor = Function.bind.apply(Parent, a);\n      var instance = new Constructor();\n      if (Class) setPrototypeOf(instance, Class.prototype);\n      return instance;\n    };\n  }\n\n  return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","var isObject = require('./isObject'),\n    isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to match leading and trailing whitespace. */\nvar reTrim = /^\\s+|\\s+$/g;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = value.replace(reTrim, '');\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n"],"sourceRoot":""}