1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[492],{13214:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/[slug]",function(){return c(38357)}])},37932:function(a,b,c){"use strict";c.d(b,{V:function(){return d.useClipboard}});var d=c(16248);c.n(d)},38357:function(a,b,c){"use strict";c.r(b),c.d(b,{"__N_SSG":function(){return La},"default":function(){return Ma}});var d=c(85893),e=c(9008),f=c(67294),g=c(19521),h=c(62284),i=c(48766),j=c(13274),k=c(25675);function l(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function m(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function n(){var a=m(["\n position: relative;\n max-width: 90rem;\n border-radius: 0.6rem;\n overflow: hidden;\n\n &::before {\n float: left;\n padding-top: 56.25%;\n content: '';\n }\n\n &::after {\n display: block;\n content: '';\n clear: both;\n }\n"]);return n=function(){return a},a}function o(){var a=m(["\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &:not(:last-child) {\n margin-bottom: 3rem;\n }\n"]);return o=function(){return a},a}function p(){var a=m(["\n display: block;\n font-size: 1.4rem;\n text-align: center;\n margin-top: 1rem;\n"]);return p=function(){return a},a}function q(a){var b=a.src,c=a.caption,e=function(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}(a,["src","caption"]);return(0,d.jsxs)(s,{children:[(0,d.jsx)(r,{children:(0,d.jsx)(k.default,function(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){l(a,b,c[b])})}return a}({src:b,alt:c||"Article Image",placeholder:"blur",blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkj6+vBwAC4AFuNSmtGAAAAABJRU5ErkJggg==",layout:"fill",objectFit:"contain"},e))}),(0,d.jsx)(t,{children:c})]})}var r=g.ZP.div.withConfig({componentId:"sc-7ac3a9c5-0"})(n()),s=g.ZP.div.withConfig({componentId:"sc-7ac3a9c5-1"})(o()),t=g.ZP.small.withConfig({componentId:"sc-7ac3a9c5-2"})(p()),u=c(27087),v=c(43032),w=c(37932);function x(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function y(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){x(a,b,c[b])})}return a}function z(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function A(){var a=z(["\n position: relative;\n top: -2.2rem;\n word-break: break-word;\n font-size: 1.2rem;\n"]);return A=function(){return a},a}function B(){var a=z(["\n position: absolute;\n border: none;\n top: 2.4rem;\n right: 2.4rem;\n visibility: hidden;\n background-color: rgba(var(--secondary), 0.1);\n cursor: pointer;\n width: 3rem;\n height: 3rem;\n line-height: normal;\n border-radius: 0.3rem;\n color: rgb(var(--text));\n z-index: 1;\n line-height: 1;\n\n &::after {\n position: absolute;\n content: 'Copied';\n visibility: ",";\n top: 0;\n left: -4rem;\n height: 3rem;\n font-weight: bold;\n border-radius: 0.3rem;\n line-height: 1.5;\n font-size: 1.4rem;\n padding: 0.5rem 1rem;\n color: rgb(var(--primary));\n background-color: rgb(var(--secondary));\n }\n\n &:hover {\n background-color: rgba(var(--secondary), 0.2);\n }\n"]);return B=function(){return a},a}function C(){var a=z(["\n position: relative;\n border-radius: 0.3em;\n margin-top: 4.5rem;\n transition: visibility 0.1s;\n font-size: 1.6rem;\n\n &:not(:last-child) {\n margin-bottom: 3rem;\n }\n\n &::after {\n position: absolute;\n height: 2.2em;\n content: '","';\n right: 2.4rem;\n padding: 1.2rem;\n top: -2em;\n line-height: 1rem;\n border-radius: 0.3em;\n font-size: 1.5rem;\n text-transform: uppercase;\n background-color: inherit;\n font-weight: bold;\n text-align: center;\n }\n\n &:hover {\n "," {\n visibility: visible;\n }\n }\n"]);return C=function(){return a},a}function D(){var a=z(["\n text-align: left;\n margin: 1em 0;\n padding: 0.5em;\n overflow: scroll;\n"]);return D=function(){return a},a}function E(){var a=z(["\n display: flex;\n"]);return E=function(){return a},a}function F(){var a=z(["\n display: table-cell;\n text-align: right;\n padding-right: 1em;\n user-select: none;\n opacity: 0.5;\n"]);return F=function(){return a},a}function G(){var a=z(["\n display: table-cell;\n"]);return G=function(){return a},a}function H(){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",focusable:"false",className:"chakra-icon css-onkibi",children:(0,d.jsx)("path",{fill:"currentColor",d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"})})}var I=g.ZP.small.withConfig({componentId:"sc-ddfcef69-0"})(A()),J=g.ZP.button.withConfig({componentId:"sc-ddfcef69-1"})(B(),function(a){return a.copied?"visible":"hidden"}),K=g.ZP.div.withConfig({componentId:"sc-ddfcef69-2"})(C(),function(a){return a.language},J),L=g.ZP.pre.withConfig({componentId:"sc-ddfcef69-3"})(D()),M=g.ZP.div.withConfig({componentId:"sc-ddfcef69-4"})(E()),N=g.ZP.span.withConfig({componentId:"sc-ddfcef69-5"})(F()),O=g.ZP.span.withConfig({componentId:"sc-ddfcef69-6"})(G()),P=c(41664);function Q(){var a,b,c=(a=["\n display: inline;\n width: fit-content;\n text-decoration: none;\n\n background: linear-gradient(rgb(var(--primary)), rgb(var(--primary)));\n background-position: 0% 100%;\n background-repeat: no-repeat;\n background-size: 100% 0px;\n transition: 100ms;\n transition-property: background-size, text-decoration, color;\n color: rgb(var(--primary));\n\n &:hover {\n background-size: 100% 100%;\n text-decoration: none;\n color: rgb(var(--background));\n }\n\n &:active {\n color: rgb(var(--background));\n background-size: 100% 100%;\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return Q=function(){return c},c}var R=g.ZP.a.withConfig({componentId:"sc-13e23be0-0"})(Q());function S(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function T(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function U(){var a=T(["\n border-left: 1px solid rgb(var(--secondary));\n padding: 3rem;\n quotes: ",";\n color: rgb(var(--secondary));\n margin-bottom: 3.7rem;\n\n &::before {\n content: open-quote;\n font-size: 8em;\n line-height: 0.1em;\n margin-right: 0.25em;\n vertical-align: -0.4em;\n opacity: 0.6;\n font-family: arial, sans-serif;\n }\n"]);return U=function(){return a},a}function V(){var a=T(["\n color: rgb(var(--text));\n display: inline;\n font-size: 2.2rem;\n line-height: 3rem;\n font-style: italic;\n hanging-punctuation: first;\n"]);return V=function(){return a},a}function W(){var a=T(["\n color: rgb(var(--text));\n display: block;\n font-size: 1.6rem;\n margin-top: 2.5rem;\n"]);return W=function(){return a},a}var X=g.ZP.figure.withConfig({componentId:"sc-eeb564e2-0"})(U(),"\"\\201c\" \"\\201d\" \"\\2018\" \"\\2019\""),Y=g.ZP.blockquote.withConfig({componentId:"sc-eeb564e2-1"})(V()),Z=g.ZP.figcaption.withConfig({componentId:"sc-eeb564e2-2"})(W());function $(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function _(){var a=$(["\n display: flex;\n ","\n\n flex-direction: column;\n width: 100%;\n\n section:not(:last-child) {\n margin-bottom: 3.8rem;\n }\n\n a {\n word-break: break-word;\n }\n\n "," {\n .remark-highlight {\n width: 100%;\n overflow-x: auto;\n }\n }\n\n & > section,\n .footnotes {\n ","\n }\n\n ol,\n ul {\n font-size: 1.8rem;\n line-height: 2.7rem;\n margin: 0;\n padding-left: 2.4rem;\n li {\n & > * {\n vertical-align: top;\n }\n }\n\n &:not(:last-child) {\n margin-bottom: 2.7rem;\n }\n }\n"]);return _=function(){return a},a}function aa(){var a=$(["\n font-size: 1.8rem;\n line-height: 2.7rem;\n hanging-punctuation: first;\n\n &:not(:last-child) {\n margin-bottom: 2.7rem;\n }\n\n & + ul,\n & + li {\n margin-top: -1.5rem !important;\n }\n"]);return aa=function(){return a},a}function ba(){var a=$(["\n font-size: 2.5rem;\n line-height: 3.75rem;\n margin-bottom: 3.75rem;\n"]);return ba=function(){return a},a}function ca(){var a=$(["\n font-size: 2.2rem;\n line-height: 3.4rem;\n margin-bottom: 3.4rem;\n"]);return ca=function(){return a},a}function da(){var a=$(["\n display: block;\n content: '';\n margin: 0;\n height: 3rem;\n"]);return da=function(){return a},a}function ea(){var a=$(["\n display: inline-block;\n padding: 0 0.6rem;\n color: rgb(var(--textSecondary));\n border-radius: 0.4rem;\n background-color: rgba(var(--primary), 0.8);\n font-size: 1.6rem;\n font-family: inherit;\n"]);return ea=function(){return a},a}function fa(a){return(0,d.jsx)(ga,{children:(0,d.jsx)(i.t,{content:a.content,components:ma})})}var ga=g.ZP.div.withConfig({componentId:"sc-40d5cc3b-0"})(_(),"",(0,j.B)("<=desktop"),""),ha=g.ZP.p.withConfig({componentId:"sc-40d5cc3b-1"}
1)(aa()),ia=g.ZP.h2.withConfig({componentId:"sc-40d5cc3b-2"})(ba()),ja=g.ZP.h3.withConfig({componentId:"sc-40d5cc3b-3"})(ca()),ka=g.ZP.br.withConfig({componentId:"sc-40d5cc3b-4"})(da()),la=g.ZP.code.withConfig({componentId:"sc-40d5cc3b-5"})(ea()),ma={h2:ia,h3:ja,p:ha,br:ka,inlineCode:la,Image:q,Link:function(a){var b=a.href,c=a.children;return(0,d.jsx)(P.default,{href:b,passHref:!0,children:(0,d.jsx)(R,{children:c})})},Code:function(a){var b=a.code,c=a.language,e=void 0===c?"javascript":c,f=a.selectedLines,g=void 0===f?[]:f,h=a.withCopyButton,i=void 0===h||h,j=a.withLineNumbers,k=a.caption,l=function(a){n(a)},m=(0,w.V)({copiedTimeout:600}),n=m.copy,o=m.copied,p=(0,d.jsx)(v.Z,{children:(0,d.jsx)(J,{copied:o,onClick:function(){return l(b)},children:(0,d.jsx)(H,{})})});return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(u.ZP,y({},u.lG,{theme:void 0,code:b,language:e,children:function(a){var b=a.className,c=a.style,f=a.tokens,h=a.getLineProps,l=a.getTokenProps;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(K,{className:"code-wrapper",language:e,children:[i&&p,(0,d.jsx)(L,{className:b,style:c,children:f.map(function(a,b){var c=b+1,e=g.includes(c),f=h({line:a,key:b}),i=f.className+(e?" selected-line":"");return(0,d.jsxs)(M,y({},f,{className:i,children:[j&&(0,d.jsx)(N,{children:c}),(0,d.jsx)(O,{children:a.map(function(a,b){return(0,d.jsx)("span",y({},l({token:a,key:b})),b)})})]}),b)})})]}),k&&(0,d.jsx)(I,{children:k})]})}}))})},Quote:function(a){var b=a.content,c=a.author,e=a.cite;return(0,d.jsxs)(X,{children:[(0,d.jsx)(Y,function(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){S(a,b,c[b])})}return a}({},e&&{cite:e},{children:b})),(0,d.jsxs)(Z,{children:["â ",c]})]})},ArticleImage:q},na=c(20457),oa=c(61436),pa=c(45843),qa=c.n(pa);function ra(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function sa(){var a=ra(["\n display: flex;\n flex-direction: column;\n max-width: 90rem;\n margin-bottom: 8rem;\n"]);return sa=function(){return a},a}function ta(){var a=ra(["\n font-weight: 600;\n font-size: 4.8rem;\n line-height: 5.6rem;\n margin-bottom: 28px;\n\n "," {\n font-size: 3.5rem;\n line-height: 4.8rem;\n }\n"]);return ta=function(){return a},a}function ua(){var a=ra(["\n font-size: 1.6rem;\n color: var(--text-lighter);\n"]);return ua=function(){return a},a}function va(){var a=ra(["\n &::before {\n display: inline-block;\n content: '\x000B7';\n margin: 0 0.6rem;\n }\n"],["\n &::before {\n display: inline-block;\n content: '\\x000B7';\n margin: 0 0.6rem;\n }\n"]);return va=function(){return a},a}function wa(a){var b=a.title,c=a.formattedDate,e=a.imageUrl,f=a.readTime;return(0,d.jsxs)(xa,{children:[(0,d.jsx)(q,{src:e}),(0,d.jsx)(ya,{children:b}),(0,d.jsxs)(za,{children:[c," ",(0,d.jsx)(Aa,{})," ",f]})]})}var xa=g.ZP.div.withConfig({componentId:"sc-98c67c27-0"})(sa()),ya=g.ZP.h1.withConfig({componentId:"sc-98c67c27-1"})(ta(),(0,j.B)("<=tablet")),za=g.ZP.div.withConfig({componentId:"sc-98c67c27-2"})(ua()),Aa=g.ZP.span.withConfig({componentId:"sc-98c67c27-3"})(va()),Ba=c(81431);function Ca(a){var b=a.title,c=a.description,f=a.author;return(0,d.jsxs)(e.default,{children:[(0,d.jsxs)("title",{children:[b," | ",Ba.$.SITE_NAME]}),(0,d.jsx)("meta",{name:"description",content:c}),(0,d.jsx)("meta",{name:"author",content:f})]})}function Da(a){var b=a.slug,c=a.title,f=a.description,g=a.date,h=a.tags,i=Ba.$.URL+"blog/"+b,j=Ba.$.OG_IMAGES_URL+"".concat(b,".png"),k=Ba.$.URL.replace("https://","");return(0,d.jsxs)(e.default,{children:[(0,d.jsx)("link",{rel:"canonical",href:i}),(0,d.jsx)("meta",{property:"og:title",content:c}),(0,d.jsx)("meta",{property:"og:site_name",content:k}),(0,d.jsx)("meta",{property:"og:type",content:"article"}),(0,d.jsx)("meta",{property:"og:description",content:f}),(0,d.jsx)("meta",{property:"og:url",content:i}),(0,d.jsx)("meta",{property:"og:image",content:j}),(0,d.jsx)("meta",{property:"og:image:alt",content:f}),(0,d.jsx)("meta",{property:"og:locale",content:"en_US"}),(0,d.jsx)("meta",{property:"article:published_time",content:new Date(g).toString()}),(0,d.jsx)("meta",{property:"article:section",content:h}),(0,d.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,d.jsx)("meta",{name:"twitter:title",content:c}),(0,d.jsx)("meta",{name:"twitter:description",content:f}),(0,d.jsx)("meta",{name:"twitter:image",content:j}),(0,d.jsx)("meta",{name:"twitter:image:alt",content:f}),(0,d.jsx)("meta",{name:"robots",content:"max-image-preview:large"})]})}var Ea=c(45363);function Fa(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function Ga(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){Fa(a,b,c[b])})}return a}function Ha(a){var b=a.slug,c=a.title,f=a.date,g=a.description,h=a.tags,i=a.author,j=Ba.$.
1URL+"blog/"+b,k=Ba.$.OG_IMAGES_URL+"".concat(b,".png"),l=Ba.$.URL.replace("https://",""),m=Ba.$.URL+"logo.png";return(0,d.jsxs)(e.default,{children:[(0,d.jsx)("script",Ga({},(0,Ea.h6)({"@context":"https://schema.org","@type":"TechArticle",mainEntityOfPage:"".concat(j,"#content"),headline:c,datePublished:f,dateModified:f,author:{"@type":"Person",name:i},description:g,dependencies:h,proficiencyLevel:"Beginner",publisher:{"@type":"Organization",name:l,logo:{"@type":"ImageObject",url:m}},image:{"@type":"ImageObject",url:k}}))),(0,d.jsx)("script",Ga({},(0,Ea.h6)({"@context":"https://schema.org","@type":"WebSite",name:l,alternateName:l,url:Ba.$.URL})))]})}function Ia(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function Ja(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){Ia(a,b,c[b])})}return a}function Ka(){var a,b,c=(a=["\n position: relative;\n max-width: 90rem;\n margin: 10rem auto;\n\n "," {\n margin: 5rem auto;\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return Ka=function(){return c},c}var La=!0;function Ma(a){var b=(0,f.useRef)(null),c=(0,f.useState)(""),g=c[0],h=c[1];(0,f.useEffect)(function(){var a,c,d;(d=b.current)&&h((a=d.textContent||"",c=Math.round(qa()(a).minutes),"".concat(c<1?"< 1":Math.round(c),"min read"))),(function(){if(!document.querySelector("link[data-id=\"prism-theme\"]")){var a=document.querySelector("head");if(a){var b=document.createElement("link");b.setAttribute("data-id","prism-theme"),b.setAttribute("rel","stylesheet"),b.setAttribute("href","/prism-theme.css"),b.setAttribute("media","print"),b.setAttribute("onload","this.media='all'; this.onload=null;"),a.appendChild(b)}}})()},[]);var i=a.slug,j=a.data,k=j.getPostsDocument.data.body;if(!j)return null;var l,m=j.getPostsDocument.data,n=m.title,o=m.description,p=m.date,q=m.tags,r=m.imageUrl,s={title:n,description:o,date:p,tags:q,imageUrl:r,author:""},t=(l=new Date(p),(0,oa.Z)(l)?(0,na.Z)(l,"do MMMM yyyy"):"N/A"),u=r.replace(/\/+/,"/");return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(e.default,{children:(0,d.jsx)("noscript",{children:(0,d.jsx)("link",{rel:"stylesheet",href:"/prism-theme.css"})})}),(0,d.jsx)(Da,Ja({slug:i},s)),(0,d.jsx)(Ha,Ja({slug:i},s)),(0,d.jsx)(Ca,Ja({},s)),(0,d.jsxs)(Na,{id:"content",ref:b,children:[(0,d.jsx)(wa,{title:n,formattedDate:t,imageUrl:u,readTime:g}),(0,d.jsx)(fa,{content:k})]})]})}var Na=(0,g.ZP)(h.Z).withConfig({componentId:"sc-8c92cec6-0"})(Ka(),(0,j.B)("<=tablet"))}},function(a){a.O(0,[675,7,422,774,888,179],function(){return a(a.s=13214)}),_N_E=a.O()}])
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.