` will be\r\n passed to the HTML element, allowing you set the `className`, `style`, etc.\r\n\n ```jsx\r\n import { InView } from 'react-intersection-observer';\r\n\n const Component = () => (\r\n console.log('Inview:', inView)}>\r\n Plain children are always rendered. Use onChange to monitor state.
\r\n \r\n );\r\n\n export default Component;\r\n ```\r\n */\n\n\nvar InView = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(InView, _React$Component);\n\n function InView(props) {\n var _this;\n\n _this = _React$Component.call(this, props) || this;\n _this.node = null;\n _this._unobserveCb = null;\n\n _this.handleNode = function (node) {\n if (_this.node) {\n // Clear the old observer, before we start observing a new element\n _this.unobserve();\n\n if (!node && !_this.props.triggerOnce && !_this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n _this.setState({\n inView: !!_this.props.initialInView,\n entry: undefined\n });\n }\n }\n\n _this.node = node ? node : null;\n\n _this.observeNode();\n };\n\n _this.handleChange = function (inView, entry) {\n if (inView && _this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n _this.unobserve();\n }\n\n if (!isPlainChildren(_this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n _this.setState({\n inView: inView,\n entry: entry\n });\n }\n\n if (_this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n _this.props.onChange(inView, entry);\n }\n };\n\n _this.state = {\n inView: !!props.initialInView,\n entry: undefined\n };\n return _this;\n }\n\n var _proto = InView.prototype;\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n this.unobserve();\n this.observeNode();\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.unobserve();\n this.node = null;\n };\n\n _proto.observeNode = function observeNode() {\n if (!this.node || this.props.skip) return;\n var _this$props = this.props,\n threshold = _this$props.threshold,\n root = _this$props.root,\n rootMargin = _this$props.rootMargin,\n trackVisibility = _this$props.trackVisibility,\n delay = _this$props.delay;\n this._unobserveCb = observe(this.node, this.handleChange, {\n threshold: threshold,\n root: root,\n rootMargin: rootMargin,\n // @ts-ignore\n trackVisibility: trackVisibility,\n // @ts-ignore\n delay: delay\n });\n };\n\n _proto.unobserve = function unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n\n this._unobserveCb = null;\n }\n };\n\n _proto.render = function render() {\n if (!isPlainChildren(this.props)) {\n var _this$state = this.state,\n inView = _this$state.inView,\n entry = _this$state.entry;\n return this.props.children({\n inView: inView,\n entry: entry,\n ref: this.handleNode\n });\n }\n\n var _this$props2 = this.props,\n children = _this$props2.children,\n as = _this$props2.as,\n tag = _this$props2.tag,\n props = _objectWithoutPropertiesLoose(_this$props2, [\"children\", \"as\", \"tag\", \"triggerOnce\", \"threshold\", \"root\", \"rootMargin\", \"onChange\", \"skip\", \"trackVisibility\", \"delay\", \"initialInView\"]);\n\n return /*#__PURE__*/createElement(as || tag || 'div', _extends({\n ref: this.handleNode\n }, props), children);\n };\n\n return InView;\n}(Component);\n\nInView.displayName = 'InView';\nInView.defaultProps = {\n threshold: 0,\n triggerOnce: false,\n initialInView: false\n};\n/**\r\n * React Hooks make it easy to monitor the `inView` state of your components. Call\r\n * the `useInView` hook with the (optional) [options](#options) you need. It will\r\n * return an array containing a `ref`, the `inView` status and the current\r\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\r\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\r\n * report the status.\r\n *\r\n * @example\r\n * ```jsx\r\n * import React from 'react';\r\n * import { useInView } from 'react-intersection-observer';\r\n *\r\n * const Component = () => {\r\n * const { ref, inView, entry } = useInView({\r\n * threshold: 0,\r\n * });\r\n *\r\n * return (\r\n * \r\n *
{`Header inside viewport ${inView}.`}
\r\n * \r\n * );\r\n * };\r\n * ```\r\n */\n\nfunction useInView(_temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n threshold = _ref.threshold,\n delay = _ref.delay,\n trackVisibility = _ref.trackVisibility,\n rootMargin = _ref.rootMargin,\n root = _ref.root,\n triggerOnce = _ref.triggerOnce,\n skip = _ref.skip,\n initialInView = _ref.initialInView;\n\n var unobserve = useRef();\n\n var _React$useState = useState({\n inView: !!initialInView\n }),\n state = _React$useState[0],\n setState = _React$useState[1];\n\n var setRef = useCallback(function (node) {\n if (unobserve.current !== undefined) {\n unobserve.current();\n unobserve.current = undefined;\n } // Skip creating the observer\n\n\n if (skip) return;\n\n if (node) {\n unobserve.current = observe(node, function (inView, entry) {\n setState({\n inView: inView,\n entry: entry\n });\n\n if (entry.isIntersecting && triggerOnce && unobserve.current) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve.current();\n unobserve.current = undefined;\n }\n }, {\n root: root,\n rootMargin: rootMargin,\n threshold: threshold,\n // @ts-ignore\n trackVisibility: trackVisibility,\n // @ts-ignore\n delay: delay\n });\n }\n }, // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [// If the threshold is an array, convert it to a string so it won't change between renders.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, delay]);\n /* eslint-disable-next-line */\n\n useEffect(function () {\n if (!unobserve.current && state.entry && !triggerOnce && !skip) {\n // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n setState({\n inView: !!initialInView\n });\n }\n });\n var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.\n\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n return result;\n}\n\nexport default InView;\nexport { InView, observe, useInView };","import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport { createElement, Component, useState, useEffect } from 'react';\nimport InView, { useInView } from 'react-intersection-observer';\n\nfunction calculateVerticalPercentage(bounds, threshold, root) {\n if (threshold === void 0) {\n threshold = 0;\n }\n\n if (root === void 0) {\n root = window;\n }\n\n if (!root) return 0;\n var vh = (root instanceof Element ? root.clientHeight : root.innerHeight) || 0;\n var offset = threshold * bounds.height;\n var percentage = (bounds.bottom - offset) / (vh + bounds.height - offset * 2);\n return 1 - Math.max(0, Math.min(1, percentage));\n}\n\nfunction calculateHorizontalPercentage(bounds, threshold, root) {\n if (threshold === void 0) {\n threshold = 0;\n }\n\n if (root === void 0) {\n root = window;\n }\n\n if (!root) return 0;\n var vw = (root instanceof Element ? root.clientWidth : root.innerWidth) || 0;\n var offset = threshold * bounds.width;\n var percentage = (bounds.right - offset) / (vw + bounds.width - offset * 2);\n return 1 - Math.max(0, Math.min(1, percentage));\n}\n\nfunction isPlainChildren(props) {\n return typeof props.children !== 'function';\n}\n/**\n * Monitors scroll, and triggers the children function with updated props\n *\n \n {({ref, percentage}) => (\n {`${percentage}`}
\n )}\n \n */\n\n\nvar ScrollPercentage = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(ScrollPercentage, _React$Component);\n\n function ScrollPercentage() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n\n _defineProperty(_assertThisInitialized(_this), \"state\", {\n percentage: 0,\n inView: false,\n entry: undefined\n });\n\n _defineProperty(_assertThisInitialized(_this), \"node\", undefined);\n\n _defineProperty(_assertThisInitialized(_this), \"monitoring\", false);\n\n _defineProperty(_assertThisInitialized(_this), \"handleScroll\", function () {\n if (!_this.node) return;\n\n var bounds = _this.node.getBoundingClientRect();\n\n var percentage = _this.props.horizontal ? calculateHorizontalPercentage(bounds, _this.props.threshold, _this.props.root) : calculateVerticalPercentage(bounds, _this.props.threshold, _this.props.root);\n\n if (percentage !== _this.state.percentage) {\n _this.setState({\n percentage: percentage\n });\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleInView\", function (inView, entry) {\n _this.node = entry.target;\n\n _this.setState({\n entry: entry,\n inView: inView\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleRenderProps\", function (_ref) {\n var ref = _ref.ref;\n var _this$state = _this.state,\n percentage = _this$state.percentage,\n entry = _this$state.entry,\n inView = _this$state.inView;\n\n if (!isPlainChildren(_this.props)) {\n return _this.props.children({\n percentage: percentage,\n entry: entry,\n inView: inView,\n ref: ref\n });\n }\n\n return null;\n });\n\n return _this;\n }\n\n var _proto = ScrollPercentage.prototype;\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {\n if (this.props.onChange && (prevState.percentage !== this.state.percentage || prevState.inView !== this.state.inView)) {\n this.props.onChange(this.state.percentage, this.state.entry);\n }\n\n if (prevProps.root !== this.props.root) {\n if (this.monitoring) {\n this.monitorScroll(false, prevProps.root);\n this.monitorScroll(this.state.inView);\n }\n }\n\n if (prevState.inView !== this.state.inView) {\n this.monitorScroll(this.state.inView, prevProps.root);\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.monitorScroll(false);\n };\n\n _proto.monitorScroll = function monitorScroll(enabled, target) {\n var root = target || this.props.root || window;\n\n if (enabled) {\n if (this.monitoring) return;\n root.addEventListener('scroll', this.handleScroll, {\n passive: true\n });\n root.addEventListener('resize', this.handleScroll);\n this.handleScroll();\n this.monitoring = true;\n } else {\n if (!this.monitoring) return;\n root.removeEventListener('scroll', this.handleScroll);\n root.removeEventListener('resize', this.handleScroll);\n this.monitoring = false;\n }\n };\n\n _proto.render = function render() {\n return createElement(InView, {\n onChange: this.handleInView\n }, !isPlainChildren(this.props) ? this.handleRenderProps : this.props.children);\n };\n\n return ScrollPercentage;\n}(Component);\n\n_defineProperty(ScrollPercentage, \"displayName\", 'ScrollPercentage');\n\n_defineProperty(ScrollPercentage, \"defaultProps\", {\n threshold: 0\n});\n/**\n * Create a hook that reports the percentage an element is scrolled into the viewport.\n * @param options {ScrollPercentageOptions}\n */\n\n\nfunction useScrollPercentage(options) {\n if (options === void 0) {\n options = {};\n }\n\n var _useInView = useInView(options),\n ref = _useInView[0],\n inView = _useInView[1],\n entry = _useInView[2];\n\n var _useState = useState(0),\n percentage = _useState[0],\n setPercentage = _useState[1];\n\n var target = entry && entry.target;\n useEffect(function () {\n var handleScroll = function handleScroll() {\n if (!target) return;\n var bounds = target.getBoundingClientRect();\n var percentage = options.horizontal ? calculateHorizontalPercentage(bounds, options.threshold, options.root) : calculateVerticalPercentage(bounds, options.threshold, options.root);\n setPercentage(percentage);\n };\n\n if (inView) {\n var root = options.root || window;\n root.addEventListener('scroll', handleScroll, {\n passive: true\n });\n root.addEventListener('resize', handleScroll);\n return function () {\n root.removeEventListener('scroll', handleScroll);\n root.removeEventListener('resize', handleScroll);\n };\n } // Trigger a scroll update, so we set the initial scroll percentage\n\n\n handleScroll();\n return;\n }, [inView, options.root, options.horizontal, options.threshold, target]);\n return [ref, percentage, entry];\n}\n\nexport default ScrollPercentage;\nexport { ScrollPercentage, useScrollPercentage };","import styled from 'styles/styled';\n\nexport const Wrapper = styled.div`\n & + & {\n margin-top: 30px;\n }\n`;\n\nexport const SliderHeader = styled.div`\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n`;\n\nexport const SliderTitle = styled.p`\n color: ${({ theme }) => theme.palette.blogAccent};\n flex-basis: 100%;\n flex-grow: 1;\n font-weight: 400;\n padding-right: 10px;\n text-transform: uppercase;\n`;\n\nexport const PaginationWrapper = styled.div`\n align-items: center;\n flex-basis: 0;\n display: flex;\n justify-content: center;\n flex-grow: 0;\n\n .swiper-pagination-bullet {\n background-color: transparent;\n border: 1px solid ${({ theme }) => theme.palette.blogAccent};\n opacity: 1;\n transition: ${({ theme }) => theme.ui.transition('background-color')};\n\n &.swiper-pagination-bullet-active {\n background-color: ${({ theme }) => theme.palette.blogAccent};\n }\n\n & + .swiper-pagination-bullet {\n margin-left: 10px;\n }\n }\n`;\n","import React from 'react';\nimport SwiperCore, { Pagination, EffectFade, Autoplay } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css/bundle';\n\nimport { BlogTypes } from 'types';\n\nimport BlogCard from 'components/BlogCard';\n\nimport {\n PaginationWrapper,\n SliderHeader,\n SliderTitle,\n Wrapper,\n} from './styled';\n\ninterface Props {\n posts: BlogTypes.BlogPost[];\n title: string;\n}\n\nSwiperCore.use([Pagination, EffectFade, Autoplay]);\n\nconst BlogSidebarSlider = ({ posts, title }: Props) => {\n const id = title.toLowerCase().split(' ').join('_');\n\n return (\n \n \n {title}\n \n \n \n {posts.map((post) => (\n \n \n \n ))}\n \n \n );\n};\n\nexport default BlogSidebarSlider;\n","var __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nvar AssertionError = function (_super) {\n __extends(AssertionError, _super);\n\n function AssertionError(message) {\n var _this = _super.call(this, message) || this;\n\n _this.name = 'AssertionError';\n return _this;\n }\n\n return AssertionError;\n}(Error);\n\nexport default function assert(value, message) {\n if (!value) {\n throw new AssertionError(message);\n }\n}","import { useState, useRef, useCallback, useEffect } from 'react';\n\nvar canUsePassiveEvents = function canUsePassiveEvents() {\n if (typeof window === \"undefined\" || typeof window.addEventListener !== \"function\") return false;\n var passive = false;\n var options = Object.defineProperty({}, \"passive\", {\n // eslint-disable-next-line getter-return\n get: function get() {\n passive = true;\n }\n });\n\n var noop = function noop() {\n return null;\n };\n\n window.addEventListener(\"test\", noop, options);\n window.removeEventListener(\"test\", noop, options);\n return passive;\n};\n\nvar DEFAULT_IGNORE_CLASS = \"ignore-onclickoutside\";\n\nvar hasIgnoreClass = function hasIgnoreClass(e, ignoreClass) {\n var el = e.target || e;\n\n while (el) {\n var _el$classList;\n\n if ((_el$classList = el.classList) != null && _el$classList.contains(ignoreClass)) return true;\n el = el.parentElement;\n }\n\n return false;\n};\n\nvar clickedOnScrollbar = function clickedOnScrollbar(e) {\n return document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;\n};\n\nvar getEventOptions = function getEventOptions(type) {\n return type.includes(\"touch\") && canUsePassiveEvents() ? {\n passive: true\n } : false;\n};\n\nvar useOnclickOutside = function useOnclickOutside(callback, _temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n refsOpt = _ref.refs,\n disabled = _ref.disabled,\n _ref$eventTypes = _ref.eventTypes,\n eventTypes = _ref$eventTypes === void 0 ? [\"mousedown\", \"touchstart\"] : _ref$eventTypes,\n excludeScrollbar = _ref.excludeScrollbar,\n _ref$ignoreClass = _ref.ignoreClass,\n ignoreClass = _ref$ignoreClass === void 0 ? DEFAULT_IGNORE_CLASS : _ref$ignoreClass,\n _ref$detectIFrame = _ref.detectIFrame,\n detectIFrame = _ref$detectIFrame === void 0 ? true : _ref$detectIFrame;\n\n var _useState = useState([]),\n refsState = _useState[0],\n setRefsState = _useState[1];\n\n var callbackRef = useRef(callback);\n callbackRef.current = callback;\n var ref = useCallback(function (el) {\n return setRefsState(function (prevState) {\n return [].concat(prevState, [{\n current: el\n }]);\n });\n }, []);\n useEffect(function () {\n if (!(refsOpt != null && refsOpt.length) && !refsState.length) return;\n\n var getEls = function getEls() {\n var els = [];\n (refsOpt || refsState).forEach(function (_ref2) {\n var current = _ref2.current;\n return current && els.push(current);\n });\n return els;\n };\n\n var handler = function handler(e) {\n if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every(function (el) {\n return !el.contains(e.target);\n })) callbackRef.current(e);\n };\n\n var blurHandler = function blurHandler(e) {\n return (// On firefox the iframe becomes document.activeElement in the next event loop\n setTimeout(function () {\n var _document = document,\n activeElement = _document.activeElement;\n if ((activeElement == null ? void 0 : activeElement.tagName) === \"IFRAME\" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement)) callbackRef.current(e);\n }, 0)\n );\n };\n\n var removeEventListener = function removeEventListener() {\n eventTypes.forEach(function (type) {\n return (// @ts-expect-error\n document.removeEventListener(type, handler, getEventOptions(type))\n );\n });\n if (detectIFrame) window.removeEventListener(\"blur\", blurHandler);\n };\n\n if (disabled) {\n removeEventListener();\n return;\n }\n\n eventTypes.forEach(function (type) {\n return document.addEventListener(type, handler, getEventOptions(type));\n });\n if (detectIFrame) window.addEventListener(\"blur\", blurHandler); // eslint-disable-next-line consistent-return\n\n return function () {\n return removeEventListener();\n };\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [refsState, ignoreClass, excludeScrollbar, disabled, detectIFrame, // eslint-disable-next-line react-hooks/exhaustive-deps\n JSON.stringify(eventTypes)]);\n return ref;\n};\n\nexport default useOnclickOutside;\nexport { DEFAULT_IGNORE_CLASS };","export default function objectToGetParams(object) {\n var params = Object.entries(object).filter(function (_a) {\n var value = _a[1];\n return value !== undefined && value !== null;\n }).map(function (_a) {\n var key = _a[0],\n value = _a[1];\n return encodeURIComponent(key) + \"=\" + encodeURIComponent(String(value));\n });\n return params.length > 0 ? \"?\" + params.join('&') : '';\n}","var __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nvar __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nvar __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {\n function adopt(value) {\n return value instanceof P ? value : new P(function (resolve) {\n resolve(value);\n });\n }\n\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) {\n try {\n step(generator.next(value));\n } catch (e) {\n reject(e);\n }\n }\n\n function rejected(value) {\n try {\n step(generator[\"throw\"](value));\n } catch (e) {\n reject(e);\n }\n }\n\n function step(result) {\n result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n }\n\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\n\nvar __generator = this && this.__generator || function (thisArg, body) {\n var _ = {\n label: 0,\n sent: function sent() {\n if (t[0] & 1) throw t[1];\n return t[1];\n },\n trys: [],\n ops: []\n },\n f,\n y,\n t,\n g;\n return g = {\n next: verb(0),\n \"throw\": verb(1),\n \"return\": verb(2)\n }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function () {\n return this;\n }), g;\n\n function verb(n) {\n return function (v) {\n return step([n, v]);\n };\n }\n\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n\n while (_) {\n try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n\n switch (op[0]) {\n case 0:\n case 1:\n t = op;\n break;\n\n case 4:\n _.label++;\n return {\n value: op[1],\n done: false\n };\n\n case 5:\n _.label++;\n y = op[1];\n op = [0];\n continue;\n\n case 7:\n op = _.ops.pop();\n\n _.trys.pop();\n\n continue;\n\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n _ = 0;\n continue;\n }\n\n if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {\n _.label = op[1];\n break;\n }\n\n if (op[0] === 6 && _.label < t[1]) {\n _.label = t[1];\n t = op;\n break;\n }\n\n if (t && _.label < t[2]) {\n _.label = t[2];\n\n _.ops.push(op);\n\n break;\n }\n\n if (t[2]) _.ops.pop();\n\n _.trys.pop();\n\n continue;\n }\n\n op = body.call(thisArg, _);\n } catch (e) {\n op = [6, e];\n y = 0;\n } finally {\n f = t = 0;\n }\n }\n\n if (op[0] & 5) throw op[1];\n return {\n value: op[0] ? op[1] : void 0,\n done: true\n };\n }\n};\n\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nimport React, { Component } from 'react';\nimport cx from 'classnames';\n\nvar isPromise = function isPromise(obj) {\n return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';\n};\n\nvar getBoxPositionOnWindowCenter = function getBoxPositionOnWindowCenter(width, height) {\n return {\n left: window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - width / 2,\n top: window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - height / 2\n };\n};\n\nvar getBoxPositionOnScreenCenter = function getBoxPositionOnScreenCenter(width, height) {\n return {\n top: (window.screen.height - height) / 2,\n left: (window.screen.width - width) / 2\n };\n};\n\nfunction windowOpen(url, _a, onClose) {\n var height = _a.height,\n width = _a.width,\n configRest = __rest(_a, [\"height\", \"width\"]);\n\n var config = __assign({\n height: height,\n width: width,\n location: 'no',\n toolbar: 'no',\n status: 'no',\n directories: 'no',\n menubar: 'no',\n scrollbars: 'yes',\n resizable: 'no',\n centerscreen: 'yes',\n chrome: 'yes'\n }, configRest);\n\n var shareDialog = window.open(url, '', Object.keys(config).map(function (key) {\n return key + \"=\" + config[key];\n }).join(', '));\n\n if (onClose) {\n var interval_1 = window.setInterval(function () {\n try {\n if (shareDialog === null || shareDialog.closed) {\n window.clearInterval(interval_1);\n onClose(shareDialog);\n }\n } catch (e) {\n /* eslint-disable no-console */\n console.error(e);\n /* eslint-enable no-console */\n }\n }, 1000);\n }\n\n return shareDialog;\n}\n\nvar ShareButton = function (_super) {\n __extends(ShareButton, _super);\n\n function ShareButton() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n\n _this.openShareDialog = function (link) {\n var _a = _this.props,\n onShareWindowClose = _a.onShareWindowClose,\n _b = _a.windowHeight,\n windowHeight = _b === void 0 ? 400 : _b,\n _c = _a.windowPosition,\n windowPosition = _c === void 0 ? 'windowCenter' : _c,\n _d = _a.windowWidth,\n windowWidth = _d === void 0 ? 550 : _d;\n\n var windowConfig = __assign({\n height: windowHeight,\n width: windowWidth\n }, windowPosition === 'windowCenter' ? getBoxPositionOnWindowCenter(windowWidth, windowHeight) : getBoxPositionOnScreenCenter(windowWidth, windowHeight));\n\n windowOpen(link, windowConfig, onShareWindowClose);\n };\n\n _this.handleClick = function (event) {\n return __awaiter(_this, void 0, void 0, function () {\n var _a, beforeOnClick, disabled, networkLink, onClick, url, openShareDialogOnClick, opts, link, returnVal;\n\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0:\n _a = this.props, beforeOnClick = _a.beforeOnClick, disabled = _a.disabled, networkLink = _a.networkLink, onClick = _a.onClick, url = _a.url, openShareDialogOnClick = _a.openShareDialogOnClick, opts = _a.opts;\n link = networkLink(url, opts);\n\n if (disabled) {\n return [2\n /*return*/\n ];\n }\n\n event.preventDefault();\n if (!beforeOnClick) return [3\n /*break*/\n , 2];\n returnVal = beforeOnClick();\n if (!isPromise(returnVal)) return [3\n /*break*/\n , 2];\n return [4\n /*yield*/\n , returnVal];\n\n case 1:\n _b.sent();\n\n _b.label = 2;\n\n case 2:\n if (openShareDialogOnClick) {\n this.openShareDialog(link);\n }\n\n if (onClick) {\n onClick(event, link);\n }\n\n return [2\n /*return*/\n ];\n }\n });\n });\n };\n\n return _this;\n }\n\n ShareButton.prototype.render = function () {\n var _a = this.props,\n beforeOnClick = _a.beforeOnClick,\n children = _a.children,\n className = _a.className,\n disabled = _a.disabled,\n disabledStyle = _a.disabledStyle,\n forwardedRef = _a.forwardedRef,\n networkLink = _a.networkLink,\n networkName = _a.networkName,\n onShareWindowClose = _a.onShareWindowClose,\n openShareDialogOnClick = _a.openShareDialogOnClick,\n opts = _a.opts,\n resetButtonStyle = _a.resetButtonStyle,\n style = _a.style,\n url = _a.url,\n windowHeight = _a.windowHeight,\n windowPosition = _a.windowPosition,\n windowWidth = _a.windowWidth,\n rest = __rest(_a, [\"beforeOnClick\", \"children\", \"className\", \"disabled\", \"disabledStyle\", \"forwardedRef\", \"networkLink\", \"networkName\", \"onShareWindowClose\", \"openShareDialogOnClick\", \"opts\", \"resetButtonStyle\", \"style\", \"url\", \"windowHeight\", \"windowPosition\", \"windowWidth\"]);\n\n var newClassName = cx('react-share__ShareButton', {\n 'react-share__ShareButton--disabled': !!disabled,\n disabled: !!disabled\n }, className);\n var newStyle = resetButtonStyle ? __assign(__assign({\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n font: 'inherit',\n color: 'inherit',\n cursor: 'pointer'\n }, style), disabled && disabledStyle) : __assign(__assign({}, style), disabled && disabledStyle);\n return React.createElement(\"button\", __assign({}, rest, {\n \"aria-label\": rest['aria-label'] || networkName,\n className: newClassName,\n onClick: this.handleClick,\n ref: forwardedRef,\n style: newStyle\n }), children);\n };\n\n ShareButton.defaultProps = {\n disabledStyle: {\n opacity: 0.6\n },\n openShareDialogOnClick: true,\n resetButtonStyle: true\n };\n return ShareButton;\n}(Component);\n\nexport default ShareButton;","var __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nimport React, { forwardRef } from 'react';\nimport ShareButton from '../ShareButton';\n\nfunction createShareButton(networkName, link, optsMap, defaultProps) {\n function CreatedButton(props, ref) {\n var opts = optsMap(props);\n\n var passedProps = __assign({}, props); // remove keys from passed props that are passed as opts\n\n\n var optsKeys = Object.keys(opts);\n optsKeys.forEach(function (key) {\n delete passedProps[key];\n });\n return React.createElement(ShareButton, __assign({}, defaultProps, passedProps, {\n forwardedRef: ref,\n networkName: networkName,\n networkLink: link,\n opts: optsMap(props)\n }));\n }\n\n CreatedButton.displayName = \"ShareButton-\" + networkName;\n return forwardRef(CreatedButton);\n}\n\nexport default createShareButton;","import assert from './utils/assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './hocs/createShareButton';\n\nfunction facebookLink(url, _a) {\n var quote = _a.quote,\n hashtag = _a.hashtag;\n assert(url, 'facebook.url');\n return 'https://www.facebook.com/sharer/sharer.php' + objectToGetParams({\n u: url,\n quote: quote,\n hashtag: hashtag\n });\n}\n\nvar FacebookShareButton = createShareButton('facebook', facebookLink, function (props) {\n return {\n quote: props.quote,\n hashtag: props.hashtag\n };\n}, {\n windowWidth: 550,\n windowHeight: 400\n});\nexport default FacebookShareButton;","var __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nimport React from 'react';\nexport default function createIcon(iconConfig) {\n var Icon = function Icon(_a) {\n var bgStyle = _a.bgStyle,\n borderRadius = _a.borderRadius,\n iconFillColor = _a.iconFillColor,\n round = _a.round,\n size = _a.size,\n rest = __rest(_a, [\"bgStyle\", \"borderRadius\", \"iconFillColor\", \"round\", \"size\"]);\n\n return React.createElement(\"svg\", __assign({\n viewBox: \"0 0 64 64\",\n width: size,\n height: size\n }, rest), round ? React.createElement(\"circle\", {\n cx: \"32\",\n cy: \"32\",\n r: \"31\",\n fill: iconConfig.color,\n style: bgStyle\n }) : React.createElement(\"rect\", {\n width: \"64\",\n height: \"64\",\n rx: borderRadius,\n ry: borderRadius,\n fill: iconConfig.color,\n style: bgStyle\n }), React.createElement(\"path\", {\n d: iconConfig.path,\n fill: iconFillColor\n }));\n };\n\n Icon.defaultProps = {\n bgStyle: {},\n borderRadius: 0,\n iconFillColor: 'white',\n size: 64\n };\n return Icon;\n}","import createIcon from './hocs/createIcon';\nvar FacebookIcon = createIcon({\n color: '#3b5998',\n networkName: 'facebook',\n path: 'M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z'\n});\nexport default FacebookIcon;","import assert from './utils/assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './hocs/createShareButton';\n\nfunction linkedinLink(url, _a) {\n var title = _a.title,\n summary = _a.summary,\n source = _a.source;\n assert(url, 'linkedin.url');\n return 'https://linkedin.com/shareArticle' + objectToGetParams({\n url: url,\n mini: 'true',\n title: title,\n summary: summary,\n source: source\n });\n}\n\nvar LinkedinShareButton = createShareButton('linkedin', linkedinLink, function (_a) {\n var title = _a.title,\n summary = _a.summary,\n source = _a.source;\n return {\n title: title,\n summary: summary,\n source: source\n };\n}, {\n windowWidth: 750,\n windowHeight: 600\n});\nexport default LinkedinShareButton;","import createIcon from './hocs/createIcon';\nvar LinkedinIcon = createIcon({\n color: '#007fb1',\n networkName: 'linkedin',\n path: 'M20.4,44h5.4V26.6h-5.4V44z M23.1,18c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1 c1.7,0,3.1-1.4,3.1-3.1C26.2,19.4,24.8,18,23.1,18z M39.5,26.2c-2.6,0-4.4,1.4-5.1,2.8h-0.1v-2.4h-5.2V44h5.4v-8.6 c0-2.3,0.4-4.5,3.2-4.5c2.8,0,2.8,2.6,2.8,4.6V44H46v-9.5C46,29.8,45,26.2,39.5,26.2z'\n});\nexport default LinkedinIcon;","import assert from './utils/assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './hocs/createShareButton';\n\nfunction redditLink(url, _a) {\n var title = _a.title;\n assert(url, 'reddit.url');\n return 'https://www.reddit.com/submit' + objectToGetParams({\n url: url,\n title: title\n });\n}\n\nvar RedditShareButton = createShareButton('reddit', redditLink, function (props) {\n return {\n title: props.title\n };\n}, {\n windowWidth: 660,\n windowHeight: 460,\n windowPosition: 'windowCenter'\n});\nexport default RedditShareButton;","import createIcon from './hocs/createIcon';\nvar RedditIcon = createIcon({\n color: '#ff4500',\n networkName: 'reddit',\n path: 'm 52.8165,31.942362 c 0,-2.4803 -2.0264,-4.4965 -4.5169,-4.4965 -1.2155,0 -2.3171,0.4862 -3.128,1.2682 -3.077,-2.0247 -7.2403,-3.3133 -11.8507,-3.4782 l 2.5211,-7.9373 6.8272,1.5997 -0.0102,0.0986 c 0,2.0281 1.6575,3.6771 3.6958,3.6771 2.0366,0 3.6924,-1.649 3.6924,-3.6771 0,-2.0281 -1.6575,-3.6788 -3.6924,-3.6788 -1.564,0 -2.8968,0.9758 -3.4357,2.3443 l -7.3593,-1.7255 c -0.3213,-0.0782 -0.6477,0.1071 -0.748,0.4233 L 32,25.212062 c -4.8246,0.0578 -9.1953,1.3566 -12.41,3.4425 -0.8058,-0.7446 -1.8751,-1.2104 -3.0583,-1.2104 -2.4905,0 -4.5152,2.0179 -4.5152,4.4982 0,1.649 0.9061,3.0787 2.2389,3.8607 -0.0884,0.4794 -0.1462,0.9639 -0.1462,1.4569 0,6.6487 8.1736,12.0581 18.2223,12.0581 10.0487,0 18.224,-5.4094 18.224,-12.0581 0,-0.4658 -0.0493,-0.9248 -0.1275,-1.377 1.4144,-0.7599 2.3885,-2.2304 2.3885,-3.9406 z m -29.2808,3.0872 c 0,-1.4756 1.207,-2.6775 2.6894,-2.6775 1.4824,0 2.6877,1.2019 2.6877,2.6775 0,1.4756 -1.2053,2.6758 -2.6877,2.6758 -1.4824,0 -2.6894,-1.2002 -2.6894,-2.6758 z m 15.4037,7.9373 c -1.3549,1.3481 -3.4816,2.0043 -6.5008,2.0043 l -0.0221,-0.0051 -0.0221,0.0051 c -3.0209,0 -5.1476,-0.6562 -6.5008,-2.0043 -0.2465,-0.2448 -0.2465,-0.6443 0,-0.8891 0.2465,-0.2465 0.6477,-0.2465 0.8942,0 1.105,1.0999 2.9393,1.6337 5.6066,1.6337 l 0.0221,0.0051 0.0221,-0.0051 c 2.6673,0 4.5016,-0.5355 5.6066,-1.6354 0.2465,-0.2465 0.6477,-0.2448 0.8942,0 0.2465,0.2465 0.2465,0.6443 0,0.8908 z m -0.3213,-5.2615 c -1.4824,0 -2.6877,-1.2002 -2.6877,-2.6758 0,-1.4756 1.2053,-2.6775 2.6877,-2.6775 1.4824,0 2.6877,1.2019 2.6877,2.6775 0,1.4756 -1.2053,2.6758 -2.6877,2.6758 z'\n});\nexport default RedditIcon;","import assert from './utils/assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './hocs/createShareButton';\n\nfunction telegramLink(url, _a) {\n var title = _a.title;\n assert(url, 'telegram.url');\n return 'https://telegram.me/share/url' + objectToGetParams({\n url: url,\n text: title\n });\n}\n\nvar TelegramShareButton = createShareButton('telegram', telegramLink, function (props) {\n return {\n title: props.title\n };\n}, {\n windowWidth: 550,\n windowHeight: 400\n});\nexport default TelegramShareButton;","import createIcon from './hocs/createIcon';\nvar TelegramIcon = createIcon({\n color: '#37aee2',\n networkName: 'telegram',\n path: 'm45.90873,15.44335c-0.6901,-0.0281 -1.37668,0.14048 -1.96142,0.41265c-0.84989,0.32661 -8.63939,3.33986 -16.5237,6.39174c-3.9685,1.53296 -7.93349,3.06593 -10.98537,4.24067c-3.05012,1.1765 -5.34694,2.05098 -5.4681,2.09312c-0.80775,0.28096 -1.89996,0.63566 -2.82712,1.72788c-0.23354,0.27218 -0.46884,0.62161 -0.58825,1.10275c-0.11941,0.48114 -0.06673,1.09222 0.16682,1.5716c0.46533,0.96052 1.25376,1.35737 2.18443,1.71383c3.09051,0.99037 6.28638,1.93508 8.93263,2.8236c0.97632,3.44171 1.91401,6.89571 2.84116,10.34268c0.30554,0.69185 0.97105,0.94823 1.65764,0.95525l-0.00351,0.03512c0,0 0.53908,0.05268 1.06412,-0.07375c0.52679,-0.12292 1.18879,-0.42846 1.79109,-0.99212c0.662,-0.62161 2.45836,-2.38812 3.47683,-3.38552l7.6736,5.66477l0.06146,0.03512c0,0 0.84989,0.59703 2.09312,0.68132c0.62161,0.04214 1.4399,-0.07726 2.14229,-0.59176c0.70766,-0.51626 1.1765,-1.34683 1.396,-2.29506c0.65673,-2.86224 5.00979,-23.57745 5.75257,-27.00686l-0.02107,0.08077c0.51977,-1.93157 0.32837,-3.70159 -0.87096,-4.74991c-0.60054,-0.52152 -1.2924,-0.7498 -1.98425,-0.77965l0,0.00176zm-0.2072,3.29069c0.04741,0.0439 0.0439,0.0439 0.00351,0.04741c-0.01229,-0.00351 0.14048,0.2072 -0.15804,1.32576l-0.01229,0.04214l-0.00878,0.03863c-0.75858,3.50668 -5.15554,24.40802 -5.74203,26.96472c-0.08077,0.34417 -0.11414,0.31959 -0.09482,0.29852c-0.1756,-0.02634 -0.50045,-0.16506 -0.52679,-0.1756l-13.13468,-9.70175c4.4988,-4.33199 9.09945,-8.25307 13.744,-12.43229c0.8218,-0.41265 0.68483,-1.68573 -0.29852,-1.70681c-1.04305,0.24584 -1.92279,0.99564 -2.8798,1.47502c-5.49971,3.2626 -11.11882,6.13186 -16.55882,9.49279c-2.792,-0.97105 -5.57873,-1.77704 -8.15298,-2.57601c2.2336,-0.89555 4.00889,-1.55579 5.75608,-2.23009c3.05188,-1.1765 7.01687,-2.7042 10.98537,-4.24067c7.94051,-3.06944 15.92667,-6.16346 16.62028,-6.43037l0.05619,-0.02283l0.05268,-0.02283c0.19316,-0.0878 0.30378,-0.09658 0.35471,-0.10009c0,0 -0.01756,-0.05795 -0.00351,-0.04566l-0.00176,0zm-20.91715,22.0638l2.16687,1.60145c-0.93418,0.91311 -1.81743,1.77353 -2.45485,2.38812l0.28798,-3.98957'\n});\nexport default TelegramIcon;","import assert from './utils/assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './hocs/createShareButton';\n\nfunction twitterLink(url, _a) {\n var title = _a.title,\n via = _a.via,\n _b = _a.hashtags,\n hashtags = _b === void 0 ? [] : _b,\n _c = _a.related,\n related = _c === void 0 ? [] : _c;\n assert(url, 'twitter.url');\n assert(Array.isArray(hashtags), 'twitter.hashtags is not an array');\n assert(Array.isArray(related), 'twitter.related is not an array');\n return 'https://twitter.com/share' + objectToGetParams({\n url: url,\n text: title,\n via: via,\n hashtags: hashtags.length > 0 ? hashtags.join(',') : undefined,\n related: related.length > 0 ? related.join(',') : undefined\n });\n}\n\nvar TwitterShareButton = createShareButton('twitter', twitterLink, function (props) {\n return {\n hashtags: props.hashtags,\n title: props.title,\n via: props.via,\n related: props.related\n };\n}, {\n windowWidth: 550,\n windowHeight: 400\n});\nexport default TwitterShareButton;","import createIcon from './hocs/createIcon';\nvar TwitterIcon = createIcon({\n color: '#00aced',\n networkName: 'twitter',\n path: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z'\n});\nexport default TwitterIcon;","import styled from 'styles/styled';\n\nexport const ShareButton = styled.button`\n background-color: #005aa0;\n border-radius: 10px;\n color: ${({ theme }) => theme.palette.light};\n display: flex;\n align-items: center;\n padding: 8px 10px;\n\n .gatsby-image-wrapper {\n display: block;\n margin-right: 5px;\n }\n`;\n\nexport const ShareDropdownWrapper = styled.ul<{ isOpen: boolean }>`\n background-color: ${({ theme }) => theme.palette.blogAccent};\n border-radius: 10px;\n opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};\n padding: 15px;\n pointer-events: ${({ isOpen }) => (isOpen ? 'all' : 'none')};\n position: absolute;\n right: 0;\n top: calc(100% + 10px);\n transition: ${({ theme }) => theme.ui.transition('opacity')};\n z-index: 1;\n\n &::before {\n bottom: 100%;\n border-bottom: 5px solid ${({ theme }) => theme.palette.blogAccent};\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n content: '';\n height: 20px;\n left: calc(50% - 10px);\n position: absolute;\n width: 20px;\n }\n\n li + li {\n margin-top: 15px;\n }\n\n button {\n align-items: center;\n display: flex;\n }\n\n span {\n display: block;\n margin-left: 5px;\n }\n`;\n","import React, { useState } from 'react';\nimport { StaticImage } from 'gatsby-plugin-image';\nimport useOnclickOutside from 'react-cool-onclickoutside';\nimport {\n FacebookShareButton,\n FacebookIcon,\n TelegramShareButton,\n TelegramIcon,\n RedditIcon,\n RedditShareButton,\n TwitterIcon,\n TwitterShareButton,\n LinkedinIcon,\n LinkedinShareButton,\n} from 'react-share';\n\nimport { ShareButton, ShareDropdownWrapper } from './styled';\n\ninterface Props {\n url: string;\n}\n\nconst ShareDropdown = ({ url }: Props) => {\n const [open, setOpen] = useState(false);\n const ref = useOnclickOutside(() => {\n setOpen(false);\n });\n\n return (\n <>\n setOpen(!open)}>\n \n Share article\n \n setOpen(false)}\n ref={ref}\n >\n \n \n \n Facebook\n \n \n \n \n \n LinkedIn\n \n \n \n \n \n Reddit\n \n \n \n \n \n Telegram\n \n \n \n \n \n Twitter\n \n \n \n >\n );\n};\n\nexport default ShareDropdown;\n","import styled from 'styles/styled';\nimport { Link } from 'gatsby';\n\nexport const PageWrapper = styled.div`\n max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n margin: 0 auto;\n padding: 0 20px;\n\n @media ${({ theme }) => theme.devices.large} {\n padding: 0;\n }\n`;\n\nexport const Grid = styled.div`\n @media ${({ theme }) => theme.devices.large} {\n display: grid;\n grid-template-columns: 1fr 300px;\n gap: 30px;\n }\n`;\n\nexport const Wrapper = styled.article`\n margin: 0 auto 30px;\n min-width: 0;\n max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n width: 100%;\n\n p {\n font-weight: 400;\n }\n\n > button {\n align-self: flex-start;\n\n p {\n font-size: ${({ theme }) => theme.fontSize.titleMobile};\n }\n }\n\n @media ${({ theme }) => theme.devices.large} {\n > button p {\n font-size: ${({ theme }) => theme.fontSize.title};\n line-height: normal;\n letter-spacing: normal;\n }\n }\n`;\n\nexport const ArticleContent = styled.div`\n h2,\n p,\n ul,\n em,\n table {\n margin: 0 auto;\n }\n\n h2 {\n font-size: ${({ theme }) => theme.fontSize.smallBase};\n font-weight: ${({ theme }) => theme.fontWeight.bold};\n margin: 30px auto 15px;\n }\n\n h3,\n h4 {\n color: ${({ theme }) => theme.palette.light};\n font-size: ${({ theme }) => theme.fontSize.titleMobile};\n font-weight: ${({ theme }) => theme.fontWeight.bold};\n margin: 30px auto 15px;\n }\n\n p,\n em {\n font-weight: ${({ theme }) => theme.fontWeight.light};\n margin-bottom: 15px;\n }\n\n a {\n font-size: inherit;\n text-decoration: underline;\n }\n\n em {\n font-style: italic;\n }\n\n ul {\n padding-left: 2em;\n margin: 15px auto;\n }\n\n li {\n font-weight: ${({ theme }) => theme.fontWeight.light};\n list-style-type: initial;\n }\n\n blockquote {\n font-style: italic;\n }\n\n figure {\n margin: 30px 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-self: center;\n max-width: 100%;\n\n > span {\n margin: 0 auto;\n }\n\n img {\n border-radius: 4px;\n height: auto;\n }\n\n figcaption {\n display: none;\n }\n }\n\n // Source:\n // https://avexdesigns.com/blog/responsive-youtube-embed\n .wp-block-embed__wrapper {\n position: relative;\n padding-bottom: 56.25%;\n padding-top: 30px;\n height: 0;\n overflow: hidden;\n }\n\n .wp-block-embed__wrapper iframe,\n .wp-block-embed__wrapper object,\n .wp-block-embed__wrapper embed {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n .wp-block-embed {\n width: 100%;\n }\n\n @media ${({ theme }) => theme.devices.large} {\n h2 {\n font-size: ${({ theme }) => theme.fontSize.subtitleMobile};\n }\n\n p,\n em,\n li {\n font-size: ${({ theme }) => theme.fontSize.subtitleMobile};\n }\n\n figure {\n + figure {\n margin-top: 0;\n }\n\n figcaption {\n color: ${({ theme }) => theme.palette.light};\n display: initial;\n font-size: ${({ theme }) => theme.fontSize.base};\n margin-top: 10px;\n opacity: 0.6;\n }\n }\n }\n`;\n\nexport const BackWrapper = styled(Link)`\n align-items: center;\n display: flex;\n line-height: 1;\n\n span {\n border: 1px solid ${({ theme }) => theme.palette.blogAccent};\n border-radius: 50%;\n display: block;\n height: 1.5em;\n position: relative;\n width: 1.5em;\n\n &::before {\n border-left: 1px solid ${({ theme }) => theme.palette.blogAccent};\n border-top: 1px solid ${({ theme }) => theme.palette.blogAccent};\n bottom: 0.45em;\n content: '';\n left: 0.45em;\n position: absolute;\n right: 0.45em;\n top: 0.45em;\n transform: rotateZ(-45deg) translate(1px, 1px);\n }\n }\n\n p {\n color: ${({ theme }) => theme.palette.blogAccent};\n margin-left: 10px;\n text-transform: capitalize;\n }\n`;\n\nexport const Heading = styled.header`\n border-bottom: 1px solid ${({ theme }) => theme.palette.blogAccent};\n margin: 30px 0;\n`;\n\nexport const HeadingBottom = styled.div`\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n margin: 25px 0;\n`;\n\nexport const ShareWrapper = styled.div`\n position: relative;\n`;\n\nexport const Title = styled.h1`\n font-size: ${({ theme }) => theme.fontSize.titleDesktop};\n font-weight: ${({ theme }) => theme.fontWeight.bold};\n\n @media ${({ theme }) => theme.devices.large} {\n font-size: ${({ theme }) => theme.fontSize.titleDesktopBig};\n }\n`;\n\nexport const TagsWrapper = styled.ul`\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n`;\n\nexport const MetaWrapper = styled.div`\n margin-bottom: 30px;\n\n @media ${({ theme }) => theme.devices.medium} {\n align-items: center;\n display: flex;\n justify-content: space-between;\n }\n`;\n\nexport const AuthorWrapper = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const AuthorAvatar = styled.div`\n border-radius: 50%;\n height: 70px;\n object-fit: contain;\n margin-right: 10px;\n width: 70px;\n`;\n\nexport const AuthorMeta = styled.div``;\n\nexport const AuthorName = styled.div`\n align-items: center;\n display: flex;\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 5px;\n\n a {\n display: block;\n margin-left: 10px;\n }\n\n img {\n height: 1.5em;\n width: 1.5em;\n }\n`;\n\nexport const ArticleMeta = styled.div`\n display: flex;\n margin-top: 20px;\n\n @media ${({ theme }) => theme.devices.medium} {\n margin-top: 0;\n }\n`;\n\nexport const ArticleDate = styled.div`\n align-items: center;\n display: flex;\n\n .gatsby-image-wrapper {\n margin-right: 5px;\n }\n\n & + & {\n margin-left: 20px;\n }\n`;\n\nexport const FeaturedImgWrapper = styled.div`\n margin-bottom: 20px;\n\n @media ${({ theme }) => theme.devices.medium} {\n margin-bottom: 30px;\n }\n`;\n\nexport const ImgCaption = styled.div`\n font-style: italic;\n opacity: 0.5;\n margin-top: 10px;\n`;\n\nexport const RateWrapper = styled.div`\n border-bottom: 1px solid ${({ theme }) => theme.palette.blogAccent};\n margin: 50px 0;\n`;\n\nexport const OtherWrapper = styled.div`\n margin-bottom: 100px;\n margin-top: 50px;\n\n @media ${({ theme }) => theme.devices.medium} {\n display: flex;\n }\n`;\n\nexport const OtherLabel = styled.p`\n color: ${({ theme }) => theme.palette.blogAccent};\n font-size: 22px;\n margin-bottom: 10px;\n text-align: center;\n\n @media ${({ theme }) => theme.devices.medium} {\n text-align: left;\n }\n`;\n\nexport const OtherArticle = styled.div`\n & + & {\n margin-top: 30px;\n }\n\n @media ${({ theme }) => theme.devices.medium} {\n flex-basis: 50%;\n\n &:last-child {\n ${OtherLabel} {\n text-align: right;\n }\n }\n\n & + & {\n margin-left: 20px;\n margin-top: 0;\n }\n }\n`;\n\nexport const SideBar = styled.div`\n display: none;\n\n @media ${({ theme }) => theme.devices.large} {\n display: block;\n }\n`;\n","import React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, StaticImage } from 'gatsby-plugin-image';\nimport { useLocation } from '@reach/router';\nimport { useScrollPercentage } from 'react-scroll-percentage';\n\nimport { theme } from 'styles/styled';\nimport homeBg from 'images/background/home-bg.jpg';\n\nimport { BlogTypes } from 'types';\nimport { ROUTES } from 'constants/common';\n\nimport SEO from 'components/SEO';\nimport Layout from 'components/Layout';\nimport BlogCard from 'components/BlogCard';\nimport BlogSidebarSlider from 'components/BlogSidebarSlider';\nimport ShareDropdown from 'components/ShareDropdown';\nimport Tag from 'components/Tag';\nimport TagsHeader from 'components/TagsHeader';\nimport FacebookIcon from 'images/icons/facebook_blue.svg';\nimport LinkedInIcon from 'images/icons/linked-in_blue.svg';\nimport TwitterIcon from 'images/icons/twitter_blue.svg';\n\nimport {\n ArticleContent,\n ArticleDate,\n BackWrapper,\n Heading,\n Grid,\n PageWrapper,\n OtherArticle,\n Title,\n Wrapper,\n RateWrapper,\n OtherWrapper,\n OtherLabel,\n TagsWrapper,\n MetaWrapper,\n AuthorWrapper,\n AuthorAvatar,\n AuthorMeta,\n AuthorName,\n ArticleMeta,\n HeadingBottom,\n SideBar,\n ShareWrapper,\n} from './styled';\n\nconst BlogSingle = ({ data, pageContext }: BlogTypes.BlogPosts) => {\n const { href } = useLocation();\n const post = data.mainPost.nodes[0];\n const prevPost = pageContext?.prev;\n const nextPost = pageContext?.next;\n const [ref, percentage] = useScrollPercentage();\n\n if (post.seo) {\n post.seo.opengraphUrl = `${ROUTES.blog}/${post.slug}`;\n }\n\n return (\n \n \n \n \n\n \n \n \n \n Back
\n \n \n {post.title}\n\n \n \n {post.tags.nodes.map((t) => (\n \n ))}\n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n {post.author.node.name}
\n {post.author.node.seo.social.facebook && (\n \n
\n \n )}\n {post.author.node.seo.social.linkedIn && (\n \n
\n \n )}\n {post.author.node.seo.social.twitter && (\n \n
\n \n )}\n \n {post.author.node.description}
\n \n \n\n \n \n \n {pageContext?.readingTime.text}\n \n \n \n {post.date}\n \n \n \n\n {/* {post.featuredImage && (\n \n
\n {post.featuredImage.node.caption && (\n \n )}\n \n )} */}\n \n\n \n\n \n {prevPost && (\n \n Previous\n \n \n )}\n {nextPost && (\n \n Next\n \n \n )}\n \n \n\n \n {pageContext && (\n \n )}\n {pageContext && (\n \n )}\n \n \n \n \n );\n};\n\nexport const query = graphql`\n query ($slug: String!) {\n mainPost: allWpPost(filter: { slug: { eq: $slug } }) {\n nodes {\n ...PostMetaData\n title\n date(formatString: \"DD.MM.YYYY\")\n content\n categories {\n nodes {\n name\n }\n }\n slug\n featuredImage {\n node {\n id\n caption\n localFile {\n childImageSharp {\n fluid(quality: 100) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n }\n author {\n node {\n avatarImg {\n childImageSharp {\n gatsbyImageData(placeholder: BLURRED, width: 70)\n }\n }\n name\n description\n seo {\n social {\n facebook\n linkedIn\n twitter\n }\n }\n }\n }\n tags {\n nodes {\n id\n name\n slug\n }\n }\n }\n }\n }\n`;\n\nexport default BlogSingle;\n","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNCAzNCI+PGRlZnMvPjxwYXRoIGZpbGw9IiMwMDVhYTAiIGQ9Ik0yMS40MSAxMS4zMmgtMS42Yy0xLjI1IDAtMS41LjYtMS41IDEuNDd2MS45M2gzbC0uNCAzLjAzaC0yLjZ2Ny43NUgxNS4ydi03Ljc1aC0yLjYxdi0zLjAzaDIuNlYxMi41YzAtMi42IDEuNTktNCAzLjktNCAxLjEgMCAyLjA1LjA4IDIuMzIuMTJ2Mi43ek0xNyAwYTE3IDE3IDAgMTAwIDM0IDE3IDE3IDAgMDAwLTM0eiIvPjwvc3ZnPg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNCAzNCI+PGRlZnMvPjxwYXRoIGZpbGw9IiMwMDVhYTAiIGQ9Ik0yNS41IDI1LjQ4aC0zLjUydi01LjVjMC0xLjMyLS4wMy0zLjAxLTEuODMtMy4wMS0xLjg0IDAtMi4xMSAxLjQzLTIuMTEgMi45djUuNjFoLTMuNTJWMTQuMTVoMy4zN3YxLjU1aC4wNWEzLjcgMy43IDAgMDEzLjMzLTEuODNjMy41NyAwIDQuMjMgMi4zNSA0LjIzIDUuNHY2LjIxek0xMC41NCAxMi42YTIuMDQgMi4wNCAwIDExMC00LjA4IDIuMDQgMi4wNCAwIDAxMCA0LjA4em0xLjc3IDEyLjg4SDguNzhWMTQuMTVoMy41M3YxMS4zM3pNMTcgMGExNyAxNyAwIDEwMCAzNCAxNyAxNyAwIDAwMC0zNHoiLz48L3N2Zz4=\"","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNCAzNCI+PGRlZnMvPjxwYXRoIGZpbGw9IiMwMDVhYTAiIGQ9Ik0yMy43NiAxMy41M2wuMDEuNDZjMCA0LjYtMy41IDkuOTItOS45MiA5LjkyLTEuOTcgMC0zLjgtLjU4LTUuMzUtMS41N2E3LjE0IDcuMTQgMCAwMDUuMTYtMS40NCAzLjQ5IDMuNDkgMCAwMS0zLjI1LTIuNDIgMy41NSAzLjU1IDAgMDAxLjU3LS4wN0EzLjQ5IDMuNDkgMCAwMTkuMTggMTV2LS4wNWMuNDcuMjYgMS4wMS40MiAxLjU4LjQ0YTMuNDkgMy40OSAwIDAxLTEuMDgtNC42NiA5LjkgOS45IDAgMDA3LjIgMy42NSAzLjQ5IDMuNDkgMCAwMTUuOTQtMy4xOGMuNzktLjE2IDEuNTQtLjQ1IDIuMjEtLjg1YTMuNSAzLjUgMCAwMS0xLjUzIDEuOTNjLjctLjA5IDEuMzctLjI3IDItLjU1YTcuMTMgNy4xMyAwIDAxLTEuNzQgMS44TTE3IDBhMTcgMTcgMCAxMDAgMzQgMTcgMTcgMCAwMDAtMzQiLz48L3N2Zz4=\"","var React = require('react');\n\nfunction SearchInline (props) {\n return React.createElement(\"svg\",props,[React.createElement(\"circle\",{\"cx\":\"8\",\"cy\":\"8\",\"r\":\"7\",\"stroke\":\"currentColor\",\"key\":0}),React.createElement(\"path\",{\"d\":\"M13.5 13L18 17.5\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"key\":1})]);\n}\n\nSearchInline.defaultProps = {\"viewBox\":\"0 0 19 18\",\"fill\":\"none\"};\n\nmodule.exports = SearchInline;\n\nSearchInline.default = SearchInline;\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","argType","push","Array","isArray","inner","apply","toString","Object","prototype","key","call","join","module","exports","default","author","horizontal","image","title","date","slug","tags","excerpt","Link","to","ROUTES","fluid","aspectRatio","alt","src","placeholderImage","map","tag","Tag","id","name","dangerouslySetInnerHTML","__html","Wrapper","styled","theme","devices","medium","ImgWrapper","Image","Title","fontSize","smallBase","fontWeight","bold","large","subtitleMobile","ExcerptWrapper","palette","light","StyledButton","Button","InfoWrapper","BottomWrapper","blogAccent","TagsWrapper","TagLi","onClick","navigate","dimensions","contentMaxWidthMedium","TagsList","searching","active","SearchWrapper","ui","transition","SearchInput","useLocation","pathname","search","URLSearchParams","get","useState","val","setVal","allWpTag","useStaticQuery","nodes","filter","t","includes","activeTag","find","placeholder","onChange","e","target","value","Boolean","_extends","assign","source","this","ObserverMap","Map","RootIds","WeakMap","rootId","optionsToId","options","keys","sort","undefined","root","has","set","observe","element","callback","_createObserver","instance","thresholds","elements","observer","IntersectionObserver","entries","forEach","entry","_elements$get","inView","isIntersecting","some","threshold","intersectionRatio","trackVisibility","isVisible","createObserver","callbacks","splice","indexOf","unobserve","size","disconnect","isPlainChildren","props","children","InView","_React$Component","subClass","superClass","_this","node","_unobserveCb","handleNode","triggerOnce","skip","setState","initialInView","observeNode","handleChange","state","create","constructor","__proto__","_proto","componentDidUpdate","prevProps","rootMargin","delay","componentWillUnmount","_this$props","render","_this$state","ref","_this$props2","as","excluded","sourceKeys","_objectWithoutPropertiesLoose","createElement","Component","displayName","defaultProps","calculateVerticalPercentage","bounds","window","vh","Element","clientHeight","innerHeight","offset","height","percentage","bottom","Math","max","min","calculateHorizontalPercentage","vw","clientWidth","innerWidth","width","right","ScrollPercentage","_len","args","_key","concat","getBoundingClientRect","_ref","prevState","monitoring","monitorScroll","enabled","addEventListener","handleScroll","passive","removeEventListener","handleInView","handleRenderProps","useScrollPercentage","_useInView","_temp","useRef","_React$useState","setRef","useCallback","current","useEffect","result","useInView","_useState","setPercentage","SliderHeader","SliderTitle","PaginationWrapper","SwiperCore","Pagination","EffectFade","Autoplay","_extendStatics","posts","toLowerCase","split","spaceBetween","slidesPerView","updateOnWindowResize","preventInteractionOnTransition","fadeEffect","crossFade","effect","pagination","clickable","el","type","autoplay","post","BlogCard","featuredImage","localFile","childImageSharp","short","hasIgnoreClass","ignoreClass","_el$classList","classList","contains","parentElement","getEventOptions","defineProperty","noop","canUsePassiveEvents","refsOpt","refs","disabled","_ref$eventTypes","eventTypes","excludeScrollbar","_ref$ignoreClass","_ref$detectIFrame","detectIFrame","refsState","setRefsState","callbackRef","getEls","els","_ref2","handler","document","documentElement","clientX","clientY","clickedOnScrollbar","every","blurHandler","setTimeout","activeElement","tagName","JSON","stringify","__extends","d","b","setPrototypeOf","p","__","AssertionError","_super","message","Error","assert","objectToGetParams","object","params","_a","encodeURIComponent","String","__assign","s","n","__awaiter","thisArg","_arguments","P","generator","Promise","resolve","reject","fulfilled","step","next","rejected","done","then","__generator","body","f","y","g","_","label","sent","trys","ops","verb","Symbol","iterator","v","op","TypeError","pop","__rest","getOwnPropertySymbols","propertyIsEnumerable","isPromise","obj","getBoxPositionOnWindowCenter","left","outerWidth","screenX","screenLeft","top","outerHeight","screenY","screenTop","getBoxPositionOnScreenCenter","screen","windowOpen","url","onClose","configRest","config","location","toolbar","status","directories","menubar","scrollbars","resizable","centerscreen","chrome","shareDialog","open","interval_1","setInterval","closed","clearInterval","console","error","ShareButton","openShareDialog","link","onShareWindowClose","_b","windowHeight","_c","windowPosition","_d","windowWidth","handleClick","event","beforeOnClick","networkLink","openShareDialogOnClick","opts","returnVal","preventDefault","className","disabledStyle","forwardedRef","networkName","resetButtonStyle","style","rest","newClassName","newStyle","backgroundColor","border","padding","font","color","cursor","opacity","optsMap","CreatedButton","passedProps","forwardRef","quote","hashtag","u","createIcon","iconConfig","Icon","bgStyle","borderRadius","iconFillColor","round","viewBox","cx","cy","r","fill","rx","ry","path","summary","mini","text","via","hashtags","related","ShareDropdownWrapper","isOpen","setOpen","useOnclickOutside","S","quality","PageWrapper","Grid","titleMobile","ArticleContent","base","BackWrapper","Heading","HeadingBottom","ShareWrapper","titleDesktop","titleDesktopBig","MetaWrapper","AuthorWrapper","AuthorAvatar","AuthorMeta","AuthorName","ArticleMeta","ArticleDate","RateWrapper","OtherWrapper","OtherLabel","OtherArticle","SideBar","data","pageContext","href","mainPost","prevPost","prev","nextPost","seo","opengraphUrl","Layout","backgroundImage","homeBg","sticky","SEO","metadata","TagsHeader","G","avatarImg","gatsbyImageData","social","facebook","linkedIn","twitter","description","readingTime","content","replace","recentPosts","similarPosts","React","SearchInline"],"sourceRoot":""}